@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;
        }
    </style>
    <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>

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

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@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('pengurugan.check', $data->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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" id="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" id="alamat" class="form-control" value="{{ $data->alamat }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_telp">No. WA</label>
                        <input type="text" name="no_telp" id="no_telp" class="form-control" value="{{ $data->no_telp }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="npwp">NPWP</label>
                        <input type="text" name="npwp" id="npwp" class="form-control" value="{{ $data->npwp }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="email_aktif">Email Aktif</label>
                        <input type="text" name="email_aktif" id="email_aktif" class="form-control" value="{{ $data->email_aktif }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nik">NIK</label>
                        <input type="text" name="nik" id="nik" class="form-control" value="{{ $data->nik }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="kegiatan_pengurugan">Kegiatan Pengurugan</label>
                        <input type="text" name="kegiatan_pengurugan" id="kegiatan_pengurugan" class="form-control" value="{{ $data->kegiatan_pengurugan }}" 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" id="nama_perusahaan" class="form-control" value="{{ $data->nama_perusahaan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_perusahaan">Alamat Perusahaan</label>
                        <input type="text" name="alamat_perusahaan" id="alamat_perusahaan" class="form-control" value="{{ $data->alamat_perusahaan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nib">NIB</label>
                        <input type="text" name="nib" id="nib" class="form-control" value="{{ $data->nib }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" name="pekerjaan" id="pekerjaan" class="form-control" value="{{ $data->pekerjaan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" id="jabatan" class="form-control" value="{{ $data->jabatan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_surat">Nomor Surat <span class="text-danger">*</span></label>
                        <input type="text" name="no_surat" id="no_surat" class="form-control" value="{{ $data->no_surat }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="tanggal_surat">Tanggal Surat <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_surat" id="tanggal_surat" class="form-control" value="{{ $data->tanggal_surat }}" disabled>
                    </div>
                </div>
            </div>
            <h3>Lokasi Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_pengurugan">Nomor Pengurugan <span class="text-danger">*</span></label>
                        <input type="text" name="no_pengurugan" id="no_pengurugan" class="form-control" value="{{ $data->no_pengurugan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lokasi <span class="text-danger">*</span></label>
                        <input type="text" name="alamat_lokasi" class="form-control" id="alamat_lokasi" value="{{ $data->alamat_lokasi }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_lahan">Luas Lahan Permohonan (m<sup>2</sup>) <span class="text-danger">*</span></label>
                        <input type="text" name="luas_lahan" id="luas_lahan" class="form-control" value="{{ $data->luas_lahan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_als_hak">Luas Pada Alas Hak (m<sup>2</sup>) <span class="text-danger">*</span></label>
                        <input type="number" name="luas_als_hak" id="luas_als_hak" class="form-control" value="{{ $data->luas_als_hak }}" disabled>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="jumlah_lantai">Rencana Jumlah Lantai Bangunan <span class="text-danger">*</span></label>
                        <input type="number" name="jumlah_lantai" id="jumlah_lantai" class="form-control" value="{{ $data->jumlah_lantai }}" disabled>
                    </div>
                    <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" 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 <span class="text-danger">*</span></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_d_krk">Luas Dok.KRK <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="luas_d_krk" id="luas_d_krk" class="form-control" value="{{ $data->luas_d_krk ?? '0' }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="luas_iu">Luas Lahan IU <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="luas_iu" id="luas_iu" class="form-control" value="{{ $data->luas_iu ?? '0' }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="volume_prasarana_jalan">Volume Pada Prasarana Jalan (M<sup>3</sup>) <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="volume_prasarana_jalan" id="volume_prasarana_jalan" class="form-control" value="{{ $data->volume_prasarana_jalan ?? '0' }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="volume_halaman_bangunan">Volume Pada Halaman Bangunan (M<sup>3</sup>) <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="volume_halaman_bangunan" id="volume_halaman_bangunan" class="form-control" value="{{ $data->volume_halaman_bangunan ?? '0' }}" required>
                    </div>
                </div>
            </div>
            <h3>File Dokumen </h3>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Daftar Dokumen</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th>Nama Dokumen</th>
                                            <th width="15%">Status</th>
                                            <th width="15%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $documents = [
                                                ['field' => 'file_ktp', 'name' => 'KTP'],
                                                ['field' => 'file_surat_pernyataan_pengelolaan', 'name' => 'Surat Pernyataan Kesanggupan Pengelolaan Tanah'],
                                                ['field' => 'file_legalitas_perusahaan', 'name' => 'Legalitas Perusahaan'],
                                                ['field' => 'file_krk', 'name' => 'KRK'],
                                                ['field' => 'file_rencana_teknis', 'name' => 'Rencana Teknis Pengurugan'],
                                                ['field' => 'file_bukti_kerjasama', 'name' => 'Bukti Kerjasama dengan Pemilik Material yang Berizin'],
                                                ['field' => 'file_dokumen_lingkungan', 'name' => 'Dokumen Lingkungan'],
                                            ];
                                        @endphp

                                        @foreach($documents as $index => $doc)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $doc['name'] }}</td>
                                                <td>
                                                    @if($data->{$doc['field']})
                                                        <span class="badge bg-success">Sudah Upload</span>
                                                    @else
                                                        <span class="badge bg-danger">Belum Upload</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($data->{$doc['field']})
                                                        <button type="button" class="btn btn-primary btn-sm btn-view-file"
                                                            data-file-url="{{ asset('storage/' . $data->{$doc['field']}) }}"
                                                            data-file-name="{{ $doc['name'] }}">
                                                            <i class="fas fa-eye"></i> Lihat
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-secondary btn-sm" disabled>
                                                            <i class="fas fa-eye"></i> Lihat
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Modal untuk preview file --}}
            <div class="modal fade" id="filePreviewModal" tabindex="-1" aria-labelledby="filePreviewModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="filePreviewModalLabel"></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <embed id="filePreview" type="application/pdf" width="100%" height="600px">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            <a href="#" class="btn btn-primary" id="openNewTab" target="_blank">
                                <i class="fas fa-external-link-alt"></i> Buka di Tab Baru
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <h3>Bukti Kepemilikan Tanah</h3>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th>Jenis Bukti</th>
                                            <th>Nomor Bukti</th>
                                            <th>Tanggal Dokumen</th>
                                            <th width="15%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($data->bukti_milik_pengurug as $index => $bukti)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $bukti->jns_bukti }}</td>
                                                <td>{{ $bukti->no_bukti }}</td>
                                                <td>{{ \Carbon\Carbon::parse($bukti->tanggal_dokumen)->format('d/m/Y') }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm btn-view-file"
                                                        data-file-url="{{ asset('storage/' . $bukti->fl_bukti) }}"
                                                        data-file-name="Bukti Kepemilikan - {{ $bukti->jns_bukti }}">
                                                        <i class="fas fa-eye"></i> Lihat Dokumen
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center">Tidak ada data bukti kepemilikan</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </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" id="koordinat" disabled>{{ $data->koordinat }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="koordinat_verifikator">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="lokasi-layer">Lokasi Pemohon</label>
                                </div>
                            </div>
                        </div>
                        <textarea name="geojson_lokasi_verif" id="geojson_lokasi_verif" style="display: none;"></textarea>
                    </div>
                </div>
            </div>

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

            <table id="tabel-pola-ruang" class="table table-bordered">
                <input type="hidden" value="{{ $data->pengurugan_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 (!$data->pengurugan_pola_ruang->isEmpty())
                        @foreach ($data->pengurugan_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="isian_kawasan_rawan_bencana" 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="isian_kawasan_rawan_bencana" id="isian_kawasan_rawan_bencana" class="form-control" rows="3">{{ $data->isian_kawasan_rawan_bencana ?? '' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="kontur_tanah" 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 melengkung pada bagian tengah persil tanah yang dimohonkan.' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="kawasan_daerah_irigasi" 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 ?? 'Tidak termasuk dalam delineasi DI/DIR DIR Kewenagan Pusat/Provinsi/Kabupaten Banjar.' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <span class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Informasi Detail Pengurugan
                </span>
            </div>

            <div class="form-group mb-3">
                <span class="fw-bold text-primary mb-2">
                    Informasi Peninjauan Lapangan
                </span>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="tgl_tinjau">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 for="no_ba">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 for="tgl_ba">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 for="file_ba">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_pengurugan->count() }}" id="total_isian_pengurugan">
                    @if (!$isian_pengurugan->isEmpty())
                        @foreach ($isian_pengurugan as $isian)
                            <tr>
                                <td class="text-center align-middle">{{ $loop->iteration }}</td>
                                <td class="text-center align-middle">
                                    <textarea name="pengurugan_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" id="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('pengurugan.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>

            <div class="form-group mb-3">
                <span class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Setting Cetak
                </span>
            </div>
            <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" id="no_surat_terbit" class="form-control" value="{{ $data->no_surat_terbit }}" style="max-width: 100px !important;" required>
                            <span class="input-group-text">/TR.URUG-DPUPRP</span>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-success">Simpan</button>
        </form>
    </div>


    <!-- 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 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_pengurugan').val());
            total_isian++;
            $('#total_isian_pengurugan').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="pengurugan_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_pengurugan').val());
            total_isian--;
            $('#total_isian_pengurugan').val(total_isian);
        });
        $('#kirim-catatan').on('click', function() {
            $.ajax({
                url: "{{ route('data.kirim-catatan', $data->id) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    catatan: $('#catatan').val()
                }
            });
        });
    </script>

    <script>
        // Fungsi untuk menampilkan file dalam modal
        $(document).ready(function() {
            $('.btn-view-file').click(function() {
                const fileUrl = $(this).data('file-url');
                const fileName = $(this).data('file-name');

                // Set judul modal
                $('#filePreviewModalLabel').text(fileName);

                // Set source file preview
                $('#filePreview').attr('src', fileUrl);

                // Set URL untuk tombol buka di tab baru
                $('#openNewTab').attr('href', fileUrl);

                // Tampilkan modal
                $('#filePreviewModal').modal('show');
            });

            // Reset modal saat ditutup
            $('#filePreviewModal').on('hidden.bs.modal', function () {
                $('#filePreview').attr('src', '');
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Fungsi untuk menghapus bukti kepemilikan
            $('.btn-delete-bukti').click(function() {
                const buktiId = $(this).data('id');
                const penguruganId = $(this).data('pengurugan-id');

                if(confirm('Apakah Anda yakin ingin menghapus bukti kepemilikan ini?')) {
                    $.ajax({
                        url: `/pengurugan/${penguruganId}/bukti/${buktiId}`,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            alert('Bukti berhasil dihapus');
                            location.reload();
                        },
                        error: function(xhr) {
                            alert('Terjadi kesalahan saat menghapus bukti');
                        }
                    });
                }
            });
        });
    </script>

    <script>
        let default_pola_ruang = [];
        default_pola_ruang[1] = "Sesuai dengan yang tertuang pada Dokuemen KRK yang telah di terbitkan 600.3.2.1/1108-TR/DPUPRP, tanggal 24 September 2024 yang mengacu pada  Peraturan Daerah Kabupaten Banjar Nomor 04 Tahun 2021 tentang Rencana Tata Ruang Wilayah (RTRW) Kabupaten Banjar Tahun 2021-2041 lokasi yang dimohonka berada  Kawasan Permukiman Perkotaan ± 14.090,8 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>
                `);
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            // Event listener untuk textarea kws_rwn_bcn
            $('#isian_kawasan_rawan_bencana').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 = $('#isian_kawasan_rawan_bencana').val().replace(/\n/g, '<br>');
            $('#bcn_ljt').html(initialText);
        });
    </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',
                });
                $('#geojson_lokasi_verif').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',
                });
                $('#geojson_lokasi_verif').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
                });

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

            map.addInteraction(draw);
        });
    </script>
@endpush