@extends('master')
@section('title', 'Permukiman')
@section('style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <style>
        #map {
            height: 400px;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid #ddd;
        }
        .ol-marker {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #ff0000;
            border: 2px solid white;
            box-shadow: 0 0 4px rgba(0,0,0,0.5);
        }
        .image-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
            height: 400px;
            width: 100%;
            overflow: hidden;
            min-height: 200px;
        }
        
        .image-container img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transform-origin: center center;
            transition: transform 0.3s ease;
        }

        #new_preview_image {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transform-origin: center center;
        }

        .preview-image {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transform-origin: center center;
            transition: transform 0.3s ease;
        }

        .image-container {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;
        }
    </style>
@endsection

@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Permukiman</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <span class="breadcrumb-item active">Permukiman</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('konten')
    <div class="card">
        <div class="card-header d-sm-flex">
            <h5 class="mb-0">Permukiman</h5>
            <div class="mt-2 mt-sm-0 ms-auto">
                <form action="{{ route('permukiman') }}" method="get" class="d-flex">
                    <select class="form-select me-2" name="kecamatan">
                        <option value="">Semua Kecamatan</option>
                        @foreach ($kecamatan as $k)
                            <option value="{{ $k->nama_kecamatan }}">{{ $k->nama_kecamatan }}</option>
                        @endforeach
                    </select>
                    <button class="btn btn-primary">Filter</button>
                </form>
            </div>
            <div class="mt-2 mt-sm-0 ms-2">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_form_tambah">
                    <i class="ph-plus me-1"></i>
                    Tambah Data
                </button>
                <a href="{{ route('permukiman.peta.desa') }}" class="btn btn-info">
                    <i class="ph-map-pin"></i>&nbsp;Peta Persebaran
                </a>
            </div>
        </div>
        
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Kepala Keluarga</th>
                            <th>Alamat</th>
                            <th>RT/RW</th>
                            <th>Desa</th>
                            <th>Kecamatan</th>
                            @php
                                $baca = explode(',', Auth::user()->role->baca);
                                $ubah = explode(',', Auth::user()->role->ubah);
                                $hapus = explode(',', Auth::user()->role->hapus);
                            @endphp
                            @if (in_array('23', $baca) | in_array('22', $ubah) | in_array('22', $hapus))
                                <th class="text-center">Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            // Menghitung nomor awal berdasarkan halaman saat ini
                            $i = ($permukiman->currentPage() - 1) * $permukiman->perPage() + 1;
                        @endphp
                        @foreach ($permukiman as $data)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $data->kepala_keluarga ?? '-' }}</td>
                                <td>{{ $data->alamat ?? '-' }}</td>
                                <td class="text-center">{{ $data->rt ?? '-' }}/{{ $data->rw ?? '-' }}</td>
                                <td>{{ $data->desa ?? '-' }}</td>
                                <td>{{ $data->kecamatan ?? '-' }}</td>
                                @if (in_array('23', $baca) | in_array('22', $ubah) | in_array('22', $hapus))
                                    <td class="text-center">
                                        <div class="d-inline-flex">
                                            <div class="dropdown position-static">
                                                <a href="#" class="text-body" data-bs-toggle="dropdown">
                                                    <i class="ph-list"></i>
                                                </a>

                                                <div class="dropdown-menu dropdown-menu-end" style="position: absolute;">
                                                    @if (in_array('23', $baca))
                                                        <a href="javascript:void(0);" onclick="showDetail('{{ $data->id }}')" class="dropdown-item">
                                                            <i class="ph-eye me-2"></i>
                                                            Detail
                                                        </a>
                                                    @endif
                                                    @if (in_array('22', $ubah))
                                                        <button onclick="edit({{ $data->id }})" class="dropdown-item">
                                                            <i class="ph-note-pencil me-2"></i>
                                                            Edit
                                                        </button>
                                                    @endif
                                                    @if (in_array('22', $hapus))
                                                        <button onclick="hapus('{{ $data->id }}', '{{ $data->kepala_keluarga }}')" class="dropdown-item">
                                                            <i class="ph-trash me-2"></i>
                                                            Hapus
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                            @php
                                $i++;
                            @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-3 d-flex justify-content-end">
                {{ $permukiman->appends(request()->query())->links() }}
            </div>

            <div class="card-header d-sm-flex">
                <h5 class="mb-0">Pilih wilayah yang ingin dicetak</h5>
                <div class="mt-2 mt-sm-0 ms-auto">
                    <form action="{{ route('permukiman.cetak') }}" method="get" class="d-flex gap-2" target="_blank">
                        <select class="form-select" name="kecamatan" id="kecamatan">
                            <option value="">Pilih Kecamatan</option>
                            @foreach ($kecamatan as $item)
                                <option value="{{ $item->id_kecamatan }}" {{ request('kecamatan') == $item->id_kecamatan ? 'selected' : '' }}>
                                    {{ $item->nama_kecamatan }}
                                </option>
                            @endforeach
                        </select>

                        <select class="form-select" name="desa" id="desa">
                            <option value="">Pilih Desa</option>
                            @if(request('kecamatan'))
                                @foreach($desa->where('id_kecamatan', request('kecamatan')) as $d)
                                    <option value="{{ $d->nama_desa }}" {{ request('desa') == $d->nama_desa ? 'selected' : '' }}>
                                        {{ $d->nama_desa }}
                                    </option>
                                @endforeach
                            @endif
                        </select>

                        <select class="form-select" name="rw" id="rw">
                            <option value="">Semua RW</option>
                        </select>

                        <button type="submit" class="btn btn-secondary">
                            <i class="ph-printer me-2"></i>
                            Cetak
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div id="modal_form_upload" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Data Permukiman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('uploadPermukiman') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">File SQLite</label>
                            <div class="col-sm-9">
                                <input type="file" class="form-control" id="sqliteFile" name="sqliteFile"
                                    accept=".sqlite,.db" required>
                                <div class="form-text text-muted">Format yang diterima: .sqlite, .db</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Petugas</label>
                            <div class="col-sm-9">
                                <select class="form-control select" data-placeholder="Pilih Petugas..." name="id_user"
                                    required>
                                    <option value=""></option>
                                    {{-- @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach --}}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modal_detail" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Permukiman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-sm-12 text-center">
                            <img id="detail_foto" src="" alt="Foto Permukiman" class="img-fluid mb-3" style="max-height: 300px;">
                            <div id="foto_tidak_tersedia" class="alert alert-info d-none">
                                Foto tidak tersedia
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Tanggal Pendataan</label>
                        <div class="col-sm-8">
                            <span id="detail_tanggal_pendataan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">id</label>
                        <div class="col-sm-8">
                            <span id="detail_id"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Kepala Keluarga</label>
                        <div class="col-sm-8">
                            <span id="detail_kepala_keluarga"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">NIK</label>
                        <div class="col-sm-8">
                            <span id="detail_nik"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Alamat</label>
                        <div class="col-sm-8">
                            <span id="detail_alamat"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">RT/RW</label>
                        <div class="col-sm-8">
                            <span id="detail_rt_rw"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Dusun</label>
                        <div class="col-sm-8">
                            <span id="detail_dusun"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Desa</label>
                        <div class="col-sm-8">
                            <span id="detail_desa"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Kecamatan</label>
                        <div class="col-sm-8">
                            <span id="detail_kecamatan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Jumlah KK</label>
                        <div class="col-sm-8">
                            <span id="detail_jumlah_kk"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Pekerjaan</label>
                        <div class="col-sm-8">
                            <span id="detail_pekerjaan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Penghasilan</label>
                        <div class="col-sm-8">
                            <span id="detail_penghasilan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Status Kepemilikan Tanah</label>
                        <div class="col-sm-8">
                            <span id="detail_status_kepemilikan_tanah"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Status Kepemilikan Rumah</label>
                        <div class="col-sm-8">
                            <span id="detail_status_kepemilikan_rumah"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Luas Rumah (m2) </label>
                        <div class="col-sm-8">
                            <span id="detail_luas_rumah"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Jumlah Penghuni</label>
                        <div class="col-sm-8">
                            <span id="detail_jumlah_penghuni"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Jenis Bangunan</label>
                        <div class="col-sm-8">
                            <span id="detail_jenis_bangunan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Atap</label>
                        <div class="col-sm-8">
                            <span id="detail_atap"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Dinding</label>
                        <div class="col-sm-8">
                            <span id="detail_dinding"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Lantai</label>
                        <div class="col-sm-8">
                            <span id="detail_lantai"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Jendela</label>
                        <div class="col-sm-8">
                            <span id="detail_jendela"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Ventilasi</label>
                        <div class="col-sm-8">
                            <span id="detail_ventilasi"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Sanitasi</label>
                        <div class="col-sm-8">
                            <span id="detail_sanitasi"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Sumber Air Bersih</label>
                        <div class="col-sm-8">
                            <span id="detail_sumber_air_bersih"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Sumber Listrik</label>
                        <div class="col-sm-8">
                            <span id="detail_sumber_listrik"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Akses Jalan</label>
                        <div class="col-sm-8">
                            <span id="detail_akses_jalan"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">IMB/PBG</label>
                        <div class="col-sm-8">
                            <span id="detail_imb_pbg"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-sm-4">Koordinat</label>
                        <div class="col-sm-8">
                            <span id="detail_koordinat"></span>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal_form_tambah" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Data Permukiman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('permukiman.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Tanggal Pendataan</label>
                            <div class="col-sm-9">
                                <input type="date" class="form-control" name="tanggal_pendataan" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Kepala Keluarga</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="kepala_keluarga" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">NIK</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="nik" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Alamat</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" name="alamat" required></textarea>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">RT/RW</label>
                            <div class="col-sm-9">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="rt" placeholder="RT" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="rw" placeholder="RW" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Dusun</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="dusun">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Desa</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="desa" required>
                                    <option value="">Pilih Desa</option>
                                    <option value="Beji">Beji</option>
                                    <option value="Bulukerto">Bulukerto</option>
                                    <option value="Bumiaji">Bumiaji</option>
                                    <option value="Dadaprejo">Dadaprejo</option>
                                    <option value="Giripurno">Giripurno</option>
                                    <option value="Gunungsari">Gunungsari</option>
                                    <option value="Junrejo">Junrejo</option>
                                    <option value="Ngaglik">Ngaglik</option>
                                    <option value="Oro-oro Ombo">Oro-oro Ombo</option>
                                    <option value="Pandanrejo">Pandanrejo</option>
                                    <option value="Pendem">Pendem</option>
                                    <option value="Pesanggrahan">Pesanggrahan</option>
                                    <option value="Punten">Punten</option>
                                    <option value="Sidomulyo">Sidomulyo</option>
                                    <option value="Sisir">Sisir</option>
                                    <option value="Songgokerto">Songgokerto</option>
                                    <option value="Sumberejo">Sumberejo</option>
                                    <option value="Sumber Brantas">Sumber Brantas</option>
                                    <option value="Temas">Temas</option>
                                    <option value="Tlekung">Tlekung</option>
                                    <option value="Torongrejo">Torongrejo</option>
                                    <option value="Tulungrejo">Tulungrejo</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Kecamatan</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="kecamatan" required>
                                    <option value="">Pilih Kecamatan</option>
                                    @foreach ($kecamatan as $k)
                                        <option value="{{ $k->nama_kecamatan }}">{{ $k->nama_kecamatan }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Jumlah KK</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" name="jumlah_kk" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Pekerjaan</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="pekerjaan" required>
                                    <option value="">Pilih Pekerjaan</option>
                                    <option value="PNS">PNS</option>
                                    <option value="TNI/POLRI">TNI/POLRI</option>
                                    <option value="BUMN/D">BUMN/D</option>
                                    <option value="Ojek/Supir">Ojek/Supir</option>
                                    <option value="Honorer">Honorer</option>
                                    <option value="Karyawan">Karyawan</option>
                                    <option value="Buruh Harian">Buruh Harian</option>
                                    <option value="Tukang/Montir">Tukang/Montir</option>
                                    <option value="Petani">Petani</option>
                                    <option value="Wirausaha">Wirausaha</option>
                                    <option value="Tidak Bekerja">Tidak Bekerja</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Penghasilan</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="penghasilan" required>
                                    <option value="">Pilih Penghasilan</option>
                                    <option value="<1 Juta"><1 Juta</option>
                                    <option value="1,1-2Juta">1,1-2 Juta</option>
                                    <option value="2,1-3Juta">2,1-3 Juta</option>
                                    <option value="3,1-4 Juta">3,1-4 Juta</option>
                                    <option value=">4 Juta">>4 Juta</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Status Kepemilikan Tanah</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="status_kepemilikan_tanah" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Milik Sendiri">Milik Sendiri</option>
                                    <option value="Bukan Milik Sendiri">Bukan Milik Sendiri</option>
                                    <option value="Kontrak/Sewa">Kontrak/Sewa</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Status Kepemilikan Rumah</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="status_kepemilikan_rumah" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Milik Sendiri">Milik Sendiri</option>
                                    <option value="Bukan Milik Sendiri">Bukan Milik Sendiri</option>
                                    <option value="Kontrak/Sewa">Kontrak/Sewa</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Luas Rumah (m2) </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="luas_rumah" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Jumlah Penghuni</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" name="jumlah_penghuni" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Jenis Bangunan</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="jenis_bangunan" required>
                                    <option value="">Pilih Jenis</option>
                                    <option value="Permanen">Permanen</option>
                                    <option value="Semi Permanen">Semi Permanen</option>
                                    <option value="Tidak Permanen">Tidak Permanen</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Atap</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="atap" required>
                                    <option value="">Pilih Atap</option>
                                    <option value="Seng">Seng</option>
                                    <option value="Asbes">Asbes</option>
                                    <option value="Genteng">Genteng</option>
                                    <option value="Rumbia">Rumbia</option>
                                    <option value="Metal Sheets">Metal Sheets</option>
                                    <option value="Sirap">Sirap</option>
                                    <option value="Triplek">Triplek</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Dinding</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="dinding" required>
                                    <option value="">Pilih Dinding</option>
                                    <option value="Tembok">Tembok</option>
                                    <option value="GRC (Asbes)">GRC (Asbes)</option>
                                    <option value="Plesteran Anyaman Bambu">Plesteran Anyaman Bambu</option>
                                    <option value="Kayu">Kayu</option>
                                    <option value="Bambu">Bambu</option>
                                    <option value="Rumbia">Rumbia</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Lantai</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="lantai" required>
                                    <option value="">Pilih Lantai</option>
                                    <option value="Beton">Beton</option>
                                    <option value="Keramik">Keramik</option>
                                    <option value="Ubin">Ubin</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Jendela</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="jendela" required>
                                    <option value="">Pilih Jendela</option>
                                    <option value="Ada, Mencukupi">Ada, Mencukupi</option>
                                    <option value="Ada, Tidak Mencukupi">Ada, Tidak Mencukupi</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Ventilasi</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="ventilasi" required>
                                    <option value="">Pilih Ventilasi</option>
                                    <option value="Ada, Mencukupi">Ada, Mencukupi</option>
                                    <option value="Ada, Tidak Mencukupi">Ada, Tidak Mencukupi</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Sanitasi</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="sanitasi" required>
                                    <option value="">Pilih Sanitasi</option>
                                    <option value="WC/Septitank">WC/Septitank</option>
                                    <option value="Cubluk">Cubluk</option>
                                    <option value="IPAL Komunal">IPAL Komunal</option>
                                    <option value="Sungai">Sungai</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Sumber Air Bersih</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="sumber_air_bersih" required>
                                    <option value="">Pilih Sumber Air</option>
                                    <option value="PDAM">PDAM</option>
                                    <option value="HIPPAM">HIPPAM</option>
                                    <option value="Sumur">Sumur</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Sumber Listrik</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="sumber_listrik" required>
                                    <option value="">Pilih Sumber Listrik</option>
                                    <option value="PLN dengan Meteran">PLN dengan Meteran</option>
                                    <option value="PLN tanpa Meteran">PLN tanpa Meteran</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Akses Jalan</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="akses_jalan" required>
                                    <option value="">Pilih Akses Jalan</option>
                                    <option value="Makadam">Makadam</option>
                                    <option value="Paving">Paving</option>
                                    <option value="Aspal">Aspal</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">IMB/PBG</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="imb_pbg">
                                    <option value="">Pilih Status IMB/PBG</option>
                                    <option value="Ada">Ada</option>
                                    <option value="Tidak Ada">Tidak Ada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Jenis Rumah</label>
                            <div class="col-sm-9">
                                <select class="form-select" name="rumah">
                                    <option value="">Pilih Jenis Rumah</option>
                                    <option value="Rumah">Rumah</option>
                                    <option value="Bukan Rumah">Bukan Rumah</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Koordinat</label>
                            <div class="col-sm-9">
                                <div id="map" style="height: 400px; width: 100%; margin-bottom: 10px; border: 1px solid #ddd;"></div>
                                <div class="row mb-2">
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="latitude" name="latitude" placeholder="Latitude" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="longitude" name="longitude" placeholder="Longitude" required>
                                    </div>
                                </div>
                                <div class="form-text text-muted">Klik pada peta untuk menentukan lokasi atau isi koordinat secara manual</div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Foto</label>
                            <div class="col-sm-9">
                                <input type="file" class="form-control" name="foto" accept="image/*">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modal_form_edit" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data Permukiman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('permukiman.update') }}" method="POST" enctype="multipart/form-data" id="form_edit">
                    @csrf
                    <input type="hidden" name="id" id="edit_id">
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-sm-6">
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Tanggal Pendataan</label>
                                    <div class="col-sm-9">
                                        <input type="date" class="form-control" name="tanggal_pendataan" id="edit_tanggal_pendataan" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Kepala Keluarga</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="kepala_keluarga" id="edit_kepala_keluarga" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">NIK</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="nik" id="edit_nik" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Alamat</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" name="alamat" id="edit_alamat" required></textarea>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">RT/RW</label>
                                    <div class="col-sm-9">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="rt" id="edit_rt" placeholder="RT" required>
                                            </div>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="rw" id="edit_rw" placeholder="RW" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Dusun</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="dusun" id="edit_dusun">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Desa</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="desa" id="edit_desa" required>
                                            <option value="">Pilih Desa</option>
                                            <option value="Beji">Beji</option>
                                            <option value="Bulukerto">Bulukerto</option>
                                            <option value="Bumiaji">Bumiaji</option>
                                            <option value="Dadaprejo">Dadaprejo</option>
                                            <option value="Giripurno">Giripurno</option>
                                            <option value="Gunungsari">Gunungsari</option>
                                            <option value="Junrejo">Junrejo</option>
                                            <option value="Ngaglik">Ngaglik</option>
                                            <option value="Oro-oro Ombo">Oro-oro Ombo</option>
                                            <option value="Pandanrejo">Pandanrejo</option>
                                            <option value="Pendem">Pendem</option>
                                            <option value="Pesanggrahan">Pesanggrahan</option>
                                            <option value="Punten">Punten</option>
                                            <option value="Sidomulyo">Sidomulyo</option>
                                            <option value="Sisir">Sisir</option>
                                            <option value="Songgokerto">Songgokerto</option>
                                            <option value="Sumberejo">Sumberejo</option>
                                            <option value="Sumber Brantas">Sumber Brantas</option>
                                            <option value="Temas">Temas</option>
                                            <option value="Tlekung">Tlekung</option>
                                            <option value="Torongrejo">Torongrejo</option>
                                            <option value="Tulungrejo">Tulungrejo</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Kecamatan</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="kecamatan" id="edit_kecamatan" required>
                                            <option value="">Pilih Kecamatan</option>
                                            @foreach ($kecamatan as $k)
                                                <option value="{{ $k->nama_kecamatan }}">{{ $k->nama_kecamatan }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Jumlah KK</label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" name="jumlah_kk" id="edit_jumlah_kk" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Pekerjaan</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="pekerjaan" id="edit_pekerjaan" required>
                                            <option value="">Pilih Pekerjaan</option>
                                            <option value="PNS">PNS</option>
                                            <option value="TNI/POLRI">TNI/POLRI</option>
                                            <option value="BUMN/D">BUMN/D</option>
                                            <option value="Ojek/Supir">Ojek/Supir</option>
                                            <option value="Honorer">Honorer</option>
                                            <option value="Karyawan">Karyawan</option>
                                            <option value="Buruh Harian">Buruh Harian</option>
                                            <option value="Tukang/Montir">Tukang/Montir</option>
                                            <option value="Petani">Petani</option>
                                            <option value="Wirausaha">Wirausaha</option>
                                            <option value="Tidak Bekerja">Tidak Bekerja</option>
                                            <option value="Lainnya">Lainnya</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Penghasilan</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="penghasilan" id="edit_penghasilan" required>
                                            <option value="">Pilih Penghasilan</option>
                                            <option value="<1 Juta"><1 Juta</option>
                                            <option value="1,1-2Juta">1,1-2 Juta</option>
                                            <option value="2,1-3Juta">2,1-3 Juta</option>
                                            <option value="3,1-4 Juta">3,1-4 Juta</option>
                                            <option value=">4 Juta">>4 Juta</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Status Kepemilikan Tanah</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="status_kepemilikan_tanah" id="edit_status_kepemilikan_tanah" required>
                                            <option value="">Pilih Status</option>
                                            <option value="Milik Sendiri">Milik Sendiri</option>
                                            <option value="Bukan Milik Sendiri">Bukan Milik Sendiri</option>
                                            <option value="Kontrak/Sewa">Kontrak/Sewa</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Status Kepemilikan Rumah</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="status_kepemilikan_rumah" id="edit_status_kepemilikan_rumah" required>
                                            <option value="">Pilih Status</option>
                                            <option value="Milik Sendiri">Milik Sendiri</option>
                                            <option value="Bukan Milik Sendiri">Bukan Milik Sendiri</option>
                                            <option value="Kontrak/Sewa">Kontrak/Sewa</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Luas Rumah (m2) </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="luas_rumah" id="edit_luas_rumah" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Jumlah Penghuni</label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" name="jumlah_penghuni" id="edit_jumlah_penghuni" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Jenis Bangunan</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="jenis_bangunan" id="edit_jenis_bangunan" required>
                                            <option value="">Pilih Jenis</option>
                                            <option value="Permanen">Permanen</option>
                                            <option value="Semi Permanen">Semi Permanen</option>
                                            <option value="Tidak Permanen">Tidak Permanen</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Atap</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="atap" id="edit_atap" required>
                                            <option value="">Pilih Atap</option>
                                            <option value="Seng">Seng</option>
                                            <option value="Asbes">Asbes</option>
                                            <option value="Genteng">Genteng</option>
                                            <option value="Rumbia">Rumbia</option>
                                            <option value="Metal Sheets">Metal Sheets</option>
                                            <option value="Sirap">Sirap</option>
                                            <option value="Triplek">Triplek</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Dinding</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="dinding" id="edit_dinding" required>
                                            <option value="">Pilih Dinding</option>
                                            <option value="Tembok">Tembok</option>
                                            <option value="GRC (Asbes)">GRC (Asbes)</option>
                                            <option value="Plesteran Anyaman Bambu">Plesteran Anyaman Bambu</option>
                                            <option value="Kayu">Kayu</option>
                                            <option value="Bambu">Bambu</option>
                                            <option value="Rumbia">Rumbia</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Lantai</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="lantai" id="edit_lantai" required>
                                            <option value="">Pilih Lantai</option>
                                            <option value="Beton">Beton</option>
                                            <option value="Keramik">Keramik</option>
                                            <option value="Ubin">Ubin</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Jendela</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="jendela" id="edit_jendela" required>
                                            <option value="">Pilih Jendela</option>
                                            <option value="Ada, Mencukupi">Ada, Mencukupi</option>
                                            <option value="Ada, Tidak Mencukupi">Ada, Tidak Mencukupi</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Ventilasi</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="ventilasi" id="edit_ventilasi" required>
                                            <option value="">Pilih Ventilasi</option>
                                            <option value="Ada, Mencukupi">Ada, Mencukupi</option>
                                            <option value="Ada, Tidak Mencukupi">Ada, Tidak Mencukupi</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Sanitasi</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="sanitasi" id="edit_sanitasi" required>
                                            <option value="">Pilih Sanitasi</option>
                                            <option value="WC/Septitank">WC/Septitank</option>
                                            <option value="Cubluk">Cubluk</option>
                                            <option value="IPAL Komunal">IPAL Komunal</option>
                                            <option value="Sungai">Sungai</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Sumber Air Bersih</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="sumber_air_bersih" id="edit_sumber_air_bersih" required>
                                            <option value="">Pilih Sumber Air</option>
                                            <option value="PDAM">PDAM</option>
                                            <option value="HIPPAM">HIPPAM</option>
                                            <option value="Sumur">Sumur</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Sumber Listrik</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="sumber_listrik" id="edit_sumber_listrik" required>
                                            <option value="">Pilih Sumber Listrik</option>
                                            <option value="PLN dengan Meteran">PLN dengan Meteran</option>
                                            <option value="PLN tanpa Meteran">PLN tanpa Meteran</option>
                                            <option value="Lainnya">Lainnya</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">Akses Jalan</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="akses_jalan" id="edit_akses_jalan" required>
                                            <option value="">Pilih Akses Jalan</option>
                                            <option value="Makadam">Makadam</option>
                                            <option value="Paving">Paving</option>
                                            <option value="Aspal">Aspal</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">IMB/PBG</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="imb_pbg" id="edit_imb_pbg">
                                            <option value="">Pilih Status IMB/PBG</option>
                                            <option value="Ada">Ada</option>
                                            <option value="Tidak Ada">Tidak Ada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label"> Jenis Rumah</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" name="rumah" id="edit_rumah">
                                            <option value="">Pilih Status Rumah</option>
                                            <option value="Rumah">Rumah</option>
                                            <option value="Bukan Rumah">Bukan Rumah</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Koordinat</label>
                            <div class="col-sm-9">
                                <div id="edit_map" style="height: 400px; width: 100%; margin-bottom: 10px; border: 1px solid #ddd;"></div>
                                <div class="row mb-2">
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="edit_latitude" name="latitude" placeholder="Latitude" required onchange="updateFromEditInput()">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="edit_longitude" name="longitude" placeholder="Longitude" required onchange="updateFromEditInput()">
                                    </div>
                                </div>
                                <div class="form-text text-muted">Klik pada peta untuk menentukan lokasi atau isi koordinat secara manual</div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Foto</label>
                            <div class="col-sm-9">
                                <div class="row">
                                    <div class="col-12 mb-4">
                                        <label class="form-label">Foto Saat Ini</label>
                                        <div id="edit_foto_preview" class="mt-2">
                                            <div class="image-container" style="max-width: 100%; height: 70vh; overflow: auto; margin: 0 auto;">
                                                <!-- Foto lama akan ditampilkan di sini -->
                                            </div>
                                            <div class="btn-group mt-2" id="rotate_buttons" style="display:none;">
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="rotateImage('left')">
                                                    <i class="ph-rotate-left"></i> Putar Kiri
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="rotateImage('right')">
                                                    <i class="ph-rotate-right"></i> Putar Kanan
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Foto Baru</label>
                                        <input type="file" class="form-control mb-2" name="foto" accept="image/*" id="new_foto_input" onchange="previewNewImage(this)">
                                        <div id="new_foto_preview" class="mt-2">
                                            <div class="image-container" style="max-width: 100%; height: 70vh; overflow: auto; margin: 0 auto;">
                                                <!-- Preview foto baru akan ditampilkan di sini -->
                                            </div>
                                            <div class="btn-group mt-2" id="new_rotate_buttons" style="display:none;">
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="rotateNewImage('left')">
                                                    <i class="ph-rotate-left"></i> Putar Kiri
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="rotateNewImage('right')">
                                                    <i class="ph-rotate-right"></i> Putar Kanan
                                                </button>
                                            </div>
                                        </div>
                                        <input type="hidden" name="new_rotation" id="new_rotation_angle" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Tambahkan setelah modal form edit -->
    <div id="modal_form_hapus" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hapus Data Permukiman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form id="form_hapus" action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <p>Apakah Anda yakin ingin menghapus data permukiman dengan kepala keluarga: <strong><span id="namadelete"></span></strong>?</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger">Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    let map;
    let editMap;
    let vectorLayer;

    function initMap() {
        // Hapus map yang sudah ada jika ada
        if (map) {
            map.setTarget(null);
            map = null;
        }

        // Koordinat Kota Batu
        const kotaBatuCoords = [112.5334, -7.8672];
        
        // Buat vector source dan layer untuk marker
        const vectorSource = new ol.source.Vector();
        vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        // Inisialisasi peta
        map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vectorLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat(kotaBatuCoords),
                zoom: 13
            })
        });

        // Style untuk marker
        const markerStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: '#ff0000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffffff',
                    width: 2
                })
            })
        });

        // Event click pada peta
        map.on('click', function(evt) {
            const coords = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
            
            // Update input fields
            document.getElementById('latitude').value = coords[1].toFixed(6);
            document.getElementById('longitude').value = coords[0].toFixed(6);
            
            // Update marker
            updateMarker(coords[1], coords[0]);
        });

        // Event untuk input koordinat manual
        document.getElementById('latitude').addEventListener('change', updateFromInput);
        document.getElementById('longitude').addEventListener('change', updateFromInput);
    }

    function updateMarker(lat, lng) {
        // Hapus marker lama
        vectorLayer.getSource().clear();
        
        // Buat marker baru
        const marker = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat]))
        });
        
        // Style untuk marker
        marker.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: '#ff0000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffffff',
                    width: 2
                })
            })
        }));
        
        // Tambahkan marker ke layer
        vectorLayer.getSource().addFeature(marker);
    }

    function updateFromInput() {
        const lat = parseFloat(document.getElementById('latitude').value);
        const lng = parseFloat(document.getElementById('longitude').value);
        
        if (!isNaN(lat) && !isNaN(lng)) {
            updateMarker(lat, lng);
            
            // Pindahkan view ke koordinat yang diinput
            map.getView().animate({
                center: ol.proj.fromLonLat([lng, lat]),
                zoom: 15,
                duration: 1000
            });
        }
    }

    // Event handlers untuk modal
    $('#modal_form_tambah').on('shown.bs.modal', function () {
        setTimeout(function() {
            initMap();
        }, 300);
    });

    $('#modal_form_tambah').on('hidden.bs.modal', function () {
        if (map) {
            map.setTarget(null);
            map = null;
        }
    });

    $('#modal_form_edit').on('hidden.bs.modal', function () {
        if (editMap) {
            editMap.setTarget(null);
            editMap = null;
        }
    });

    function showDetail(id) {
        $.ajax({
            url: "{{ route('permukiman.detail', ['id' => ':id']) }}".replace(':id', id),
            type: "GET",
            dataType: "json",
            beforeSend: function() {
                Swal.fire({
                    title: 'Memuat Data...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            },
            success: function(response) {
                Swal.close();
                
                if (response.data) {
                    var data = response.data;
                    
                    // Cek dan tampilkan foto
                    var fotoUrl = "/sinar/storage/app/public/foto_permukiman/" + id + ".jpeg";
                    console.log('Mencoba mengakses foto:', fotoUrl);
                    var img = new Image();
                    img.onload = function() {
                        console.log('Foto berhasil dimuat');
                        $('#detail_foto').attr('src', getImageUrlWithTimestamp(fotoUrl)).removeClass('d-none');
                        $('#foto_tidak_tersedia').addClass('d-none');
                    };
                    img.onerror = function() {
                        console.log('Foto tidak ditemukan');
                        $('#detail_foto').addClass('d-none');
                        $('#foto_tidak_tersedia').removeClass('d-none');
                    };
                    img.src = fotoUrl;
                    
                    // Update data di modal
                    $('#detail_id').text( id || '-');
                    $('#detail_tanggal_pendataan').text(data.tanggal_pendataan || '-');
                    $('#detail_kepala_keluarga').text(data.kepala_keluarga || '-');
                    $('#detail_nik').text(data.nik || '-');
                    $('#detail_alamat').text(data.alamat || '-');
                    $('#detail_rt_rw').text((data.rt || '-') + '/' + (data.rw || '-'));
                    $('#detail_dusun').text(data.dusun || '-');
                    $('#detail_desa').text(data.desa || '-');
                    $('#detail_kecamatan').text(data.kecamatan || '-');
                    $('#detail_jumlah_kk').text(data.jumlah_kk || '-');
                    $('#detail_pekerjaan').text(data.pekerjaan || '-');
                    $('#detail_penghasilan').text(data.penghasilan || '-');
                    $('#detail_status_kepemilikan_tanah').text(data.status_kepemilikan_tanah || '-');
                    $('#detail_status_kepemilikan_rumah').text(data.status_kepemilikan_rumah || '-');
                    $('#detail_luas_rumah').text(data.luas_rumah || '-');
                    $('#detail_jumlah_penghuni').text(data.jumlah_penghuni || '-');
                    $('#detail_jenis_bangunan').text(data.jenis_bangunan || '-');
                    $('#detail_atap').text(data.atap || '-');
                    $('#detail_dinding').text(data.dinding || '-');
                    $('#detail_lantai').text(data.lantai || '-');
                    $('#detail_jendela').text(data.jendela || '-');
                    $('#detail_ventilasi').text(data.ventilasi || '-');
                    $('#detail_sanitasi').text(data.sanitasi || '-');
                    $('#detail_sumber_air_bersih').text(data.sumber_air_bersih || '-');
                    $('#detail_sumber_listrik').text(data.sumber_listrik || '-');
                    $('#detail_akses_jalan').text(data.akses_jalan || '-');
                    $('#detail_imb_pbg').text(data.imb_pbg || '-');
                    $('#detail_koordinat').text(data.koordinat || '-');
                    
                    // Tampilkan modal
                    var modalDetail = new bootstrap.Modal(document.getElementById('modal_detail'));
                    modalDetail.show();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Data tidak ditemukan'
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.close();
                console.log('Error:', xhr.responseText); // Untuk debugging
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat mengambil data: ' + error
                });
            }
        });
    }

    function edit(id) {
        $.ajax({
            url: "{{ route('permukiman.detail', ['id' => ':id']) }}".replace(':id', id),
            type: "GET",
            dataType: "json",
            beforeSend: function() {
                Swal.fire({
                    title: 'Memuat Data...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            },
            success: function(response) {
                Swal.close();
                
                if (response.data) {
                    var data = response.data;
                    
                    // Set nilai ke form
                    $('#edit_id').val(id);
                    $('#edit_tanggal_pendataan').val(data.tanggal_pendataan);
                    $('#edit_kepala_keluarga').val(data.kepala_keluarga);
                    $('#edit_nik').val(data.nik);
                    $('#edit_alamat').val(data.alamat);
                    $('#edit_rt').val(data.rt);
                    $('#edit_rw').val(data.rw);
                    $('#edit_dusun').val(data.dusun);
                    $('#edit_desa').val(data.desa);
                    $('#edit_kecamatan').val(data.kecamatan);
                    $('#edit_jumlah_kk').val(data.jumlah_kk);
                    $('#edit_pekerjaan').val(data.pekerjaan);
                    $('#edit_penghasilan').val(data.penghasilan);
                    $('#edit_status_kepemilikan_tanah').val(data.status_kepemilikan_tanah);
                    $('#edit_status_kepemilikan_rumah').val(data.status_kepemilikan_rumah);
                    $('#edit_luas_rumah').val(data.luas_rumah);
                    $('#edit_jumlah_penghuni').val(data.jumlah_penghuni);
                    $('#edit_jenis_bangunan').val(data.jenis_bangunan);
                    $('#edit_atap').val(data.atap);
                    $('#edit_dinding').val(data.dinding);
                    $('#edit_lantai').val(data.lantai);
                    $('#edit_jendela').val(data.jendela);
                    $('#edit_ventilasi').val(data.ventilasi);
                    $('#edit_sanitasi').val(data.sanitasi);
                    $('#edit_sumber_air_bersih').val(data.sumber_air_bersih);
                    $('#edit_sumber_listrik').val(data.sumber_listrik);
                    $('#edit_akses_jalan').val(data.akses_jalan);
                    $('#edit_imb_pbg').val(data.imb_pbg || '');
                    
                    // Set koordinat dengan benar
                    if (data.koordinat) {
                        // Pisahkan string koordinat menjadi latitude dan longitude
                        let koordinatArray = data.koordinat.split(',');
                        if (koordinatArray.length === 2) {
                            let lat = parseFloat(koordinatArray[0].trim());
                            let lng = parseFloat(koordinatArray[1].trim());
                            
                            $('#edit_latitude').val(lat);
                            $('#edit_longitude').val(lng);
                        }
                    }
                    
                    // Preview foto lama
                    var fotoUrl = "/sinar/storage/app/public/foto_permukiman/" + id + ".jpeg";
                    console.log('Mencoba mengakses foto:', fotoUrl);
                    var img = new Image();
                    img.onload = function() {
                        console.log('Foto berhasil dimuat');
                        $('#edit_foto_preview .image-container').empty().html(
                            `<img src="${getImageUrlWithTimestamp(fotoUrl)}" 
                                  class="preview-image" 
                                  id="preview_image" 
                                  style="transform: rotate(0deg);" 
                                  data-rotation="0">`
                        );
                        $('#rotate_buttons').show();
                        
                        // Reset rotation value
                        if (document.getElementById('current_rotation_angle')) {
                            document.getElementById('current_rotation_angle').value = '0';
                        }
                    };
                    img.onerror = function() {
                        console.log('Foto tidak ditemukan');
                        $('#edit_foto_preview .image-container').html(
                            '<div class="alert alert-info">Foto tidak tersedia</div>'
                        );
                        $('#rotate_buttons').hide();
                    };
                    img.src = fotoUrl;
                    
                    // Reset preview foto baru
                    $('#new_foto_preview .image-container').html(
                        '<div class="alert alert-info">Belum ada foto baru yang dipilih</div>'
                    );
                    $('#new_foto_input').val('');
                    
                    // Tampilkan modal
                    var modalEdit = new bootstrap.Modal(document.getElementById('modal_form_edit'));
                    modalEdit.show();
                    
                    // Inisialisasi peta setelah modal ditampilkan
                    modalEdit._element.addEventListener('shown.bs.modal', function () {
                        setTimeout(function() {
                            // Ambil koordinat dari input fields
                            const lat = parseFloat($('#edit_latitude').val());
                            const lng = parseFloat($('#edit_longitude').val());
                            
                            initEditMap(lat, lng);
                            
                            // Pastikan marker ditampilkan setelah peta dimuat
                            if (!isNaN(lat) && !isNaN(lng)) {
                                const vectorSource = editMap.getLayers().getArray()[1].getSource();
                                updateEditMarker(lat, lng, vectorSource);
                            }
                        }, 300);
                    }, { once: true });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Data tidak ditemukan'
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.close();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat mengambil data: ' + error
                });
            }
        });
    }

    function updateFromEditInput() {
        const lat = parseFloat(document.getElementById('edit_latitude').value);
        const lng = parseFloat(document.getElementById('edit_longitude').value);
        
        if (!isNaN(lat) && !isNaN(lng)) {
            // Update marker pada peta edit
            const vectorSource = editMap.getLayers().getArray()[1].getSource();
            updateEditMarker(lat, lng, vectorSource);
            
            // Pindahkan view ke koordinat yang diinput
            editMap.getView().animate({
                center: ol.proj.fromLonLat([lng, lat]),
                zoom: 15,
                duration: 1000
            });
        }
    }

    function initEditMap(lat, lng) {
        // Hapus editMap yang sudah ada jika ada
        if (editMap) {
            editMap.setTarget(null);
            editMap = null;
        }

        // Koordinat default Kota Batu jika tidak ada koordinat
        const defaultCoords = [112.5334, -7.8672];
        const coords = (lat && lng) ? [parseFloat(lng), parseFloat(lat)] : defaultCoords;
        
        // Buat vector source dan layer untuk marker
        const vectorSource = new ol.source.Vector();
        const vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        // Inisialisasi peta
        editMap = new ol.Map({
            target: 'edit_map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vectorLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat(coords),
                zoom: 15
            })
        });

        // Tambah marker jika ada koordinat
        if (lat && lng) {
            updateEditMarker(parseFloat(lat), parseFloat(lng), vectorSource);
        }

        // Event click pada peta
        editMap.on('click', function(evt) {
            const coordinates = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
            $('#edit_latitude').val(coordinates[1].toFixed(6));
            $('#edit_longitude').val(coordinates[0].toFixed(6));
            updateEditMarker(coordinates[1], coordinates[0], vectorSource);
        });

        // Tambahkan event listener untuk input koordinat manual
        document.getElementById('edit_latitude').addEventListener('change', updateFromEditInput);
        document.getElementById('edit_longitude').addEventListener('change', updateFromEditInput);
    }

    function updateEditMarker(lat, lng, vectorSource) {
        vectorSource.clear();
        const marker = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat]))
        });
        
        marker.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: '#ff0000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffffff',
                    width: 2
                })
            })
        }));
        
        vectorSource.addFeature(marker);
    }

    function hapus(id_permukiman, kepala_keluarga) {
        $('#form_hapus').attr('action', "{{ route('permukiman.hapus', ['id' => ':id']) }}".replace(':id', id_permukiman));
        $('#namadelete').text(kepala_keluarga);
        var modalHapus = new bootstrap.Modal(document.getElementById('modal_form_hapus'));
        modalHapus.show();
    }

    // Tambahkan event handler untuk form hapus
    $(document).ready(function() {
        $('#form_hapus').on('submit', function(e) {
            e.preventDefault();
            
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'json',
                beforeSend: function() {
                    Swal.fire({
                        title: 'Menghapus Data...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        showSuccessAlert(response.message);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Terjadi kesalahan saat menghapus data',
                            confirmButtonColor: '#2196f3' // Warna biru sesuai tema
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat menghapus data: ' + error
                    });
                }
            });
        });
    });

    // Fungsi untuk merotasi tampilan gambar (visual only)
    function rotateImageView(direction) {
        const container = document.querySelector('#edit_foto_preview .image-container');
        const img = container.querySelector('img');
        if (!img) return;

        // Ambil rotasi saat ini dari atribut data-rotation
        let currentRotation = parseInt(img.getAttribute('data-rotation') || '0');
        
        // Update rotasi berdasarkan arah
        if (direction === 'left') {
            currentRotation = (currentRotation - 90);
        } else {
            currentRotation = (currentRotation + 90);
        }
        
        // Normalisasi rotasi ke dalam rentang 0-360
        currentRotation = ((currentRotation % 360) + 360) % 360;
        
        // Terapkan rotasi ke gambar
        img.style.transform = `rotate(${currentRotation}deg)`;
        img.setAttribute('data-rotation', currentRotation.toString());
        
        // Update input hidden untuk rotasi
        let rotationInput = document.getElementById('current_rotation_angle');
        if (!rotationInput) {
            rotationInput = document.createElement('input');
            rotationInput.type = 'hidden';
            rotationInput.id = 'current_rotation_angle';
            rotationInput.name = 'current_rotation';
            document.getElementById('form_edit').appendChild(rotationInput);
        }
        rotationInput.value = currentRotation;
    }

    // Fungsi untuk merotasi gambar baru
    function rotateNewImageView(direction) {
        const img = document.getElementById('new_preview_image');
        if (!img) return;
        
        let currentRotation = parseInt(document.getElementById('new_rotation_angle').value) || 0;
        
        if (direction === 'left') {
            currentRotation = (currentRotation - 90) % 360;
        } else {
            currentRotation = (currentRotation + 90) % 360;
        }
        
        // Pastikan nilai rotasi selalu positif
        if (currentRotation < 0) {
            currentRotation += 360;
        }
        
        // Terapkan rotasi
        img.style.transform = `rotate(${currentRotation}deg)`;
        document.getElementById('new_rotation_angle').value = currentRotation;
    }

    // Modifikasi fungsi processImageRotation
    async function processImageRotation(img, rotation) {
        return new Promise((resolve) => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // Sesuaikan ukuran canvas berdasarkan rotasi
            const width = img.naturalWidth;
            const height = img.naturalHeight;
            
            if (rotation === 90 || rotation === 270) {
                canvas.width = height;
                canvas.height = width;
            } else {
                canvas.width = width;
                canvas.height = height;
            }
            
            // Pindahkan titik pusat ke tengah canvas
            ctx.translate(canvas.width/2, canvas.height/2);
            ctx.rotate((rotation * Math.PI) / 180);
            
            // Gambar image yang dirotasi dengan kualitas tinggi
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            
            if (rotation === 90 || rotation === 270) {
                ctx.drawImage(img, -height/2, -width/2);
            } else {
                ctx.drawImage(img, -width/2, -height/2);
            }
            
            // Konversi ke blob dengan kualitas maksimal
            canvas.toBlob((blob) => {
                const fileName = 'rotated.jpeg'; // Nama file sederhana, akan diganti saat append ke FormData
                const file = new File([blob], fileName, { 
                    type: 'image/jpeg',
                    lastModified: Date.now()
                });
                resolve(file);
            }, 'image/jpeg', 1.0);
        });
    }

    // Modifikasi event handler form edit
    $(document).ready(function() {
        $('#form_edit').on('submit', async function(e) {
            e.preventDefault();
            
            try {
                const formData = new FormData(this);
                const id = formData.get('id');
                
                // Cek rotasi foto lama
                const currentRotation = parseInt(document.getElementById('current_rotation_angle')?.value || '0');
                if (currentRotation !== 0) {
                    const existingImg = document.getElementById('preview_image');
                    if (existingImg) {
                        try {
                            // Pastikan gambar sudah dimuat
                            if (!existingImg.complete) {
                                await new Promise(resolve => {
                                    existingImg.onload = resolve;
                                });
                            }
                            
                            // Proses rotasi gambar
                            const rotatedFile = await processImageRotation(existingImg, currentRotation);
                            
                            // Tambahkan foto yang sudah dirotasi dengan nama file yang spesifik
                            formData.set('foto', rotatedFile, `${id}.jpeg`);
                            formData.append('is_rotated', '1');
                            formData.append('rotation_angle', currentRotation);
                            formData.append('original_image_id', id);
                        } catch (err) {
                            console.error('Error rotating existing image:', err);
                            throw new Error('Gagal merotasi gambar yang ada');
                        }
                    }
                }
                
                // Cek apakah ada foto baru yang diupload
                const newFileInput = document.querySelector('input[name="foto"]');
                if (newFileInput && newFileInput.files[0]) {
                    const newRotation = parseInt(document.getElementById('new_rotation_angle')?.value || '0');
                    if (newRotation !== 0) {
                        const newImg = document.getElementById('new_preview_image');
                        if (newImg) {
                            try {
                                // Pastikan gambar baru sudah dimuat
                                if (!newImg.complete) {
                                    await new Promise(resolve => {
                                        newImg.onload = resolve;
                                    });
                                }
                                
                                // Proses rotasi gambar baru
                                const rotatedNewFile = await processImageRotation(newImg, newRotation);
                                
                                // Ganti file foto dengan nama file yang spesifik
                                formData.set('foto', rotatedNewFile, `${id}.jpeg`);
                                formData.append('is_new_upload', '1');
                                formData.append('rotation_angle', newRotation);
                            } catch (err) {
                                console.error('Error rotating new image:', err);
                                throw new Error('Gagal merotasi gambar baru');
                            }
                        }
                    }
                }

                // Tambahkan header khusus untuk menangani file besar
                const response = await $.ajax({
                    url: $('#form_edit').attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 120000, // Tambah timeout menjadi 2 menit
                    headers: {
                        'X-File-Name': `${id}.jpeg`,
                        'X-File-Type': 'image/jpeg'
                    },
                    beforeSend: function() {
                        Swal.fire({
                            title: 'Menyimpan Perubahan...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    }
                });

                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        confirmButtonColor: '#2196f3'
                    }).then(() => {
                        // Refresh halaman dengan cache buster
                        window.location.reload(true); // Force reload dari server
                    });
                } else {
                    throw new Error(response.message || 'Terjadi kesalahan saat menyimpan data');
                }
                
            } catch (error) {
                console.error('Error in form submission:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan: ' + error.message
                });
            }
        });
    });

    // Modifikasi fungsi untuk preview gambar
    function previewNewImage(input) {
        const container = document.querySelector('#new_foto_preview .image-container');
        container.innerHTML = '';
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.id = 'new_preview_image';
                img.className = 'preview-image';
                img.style.maxWidth = '100%';
                img.style.maxHeight = '300px';
                img.style.transition = 'transform 0.3s ease';
                container.appendChild(img);
                
                document.getElementById('new_rotate_buttons').style.display = 'block';
                document.getElementById('new_rotation_angle').value = '0';
            }
            
            reader.readAsDataURL(input.files[0]);
        } else {
            container.innerHTML = '<div class="alert alert-info">Belum ada foto baru yang dipilih</div>';
            document.getElementById('new_rotate_buttons').style.display = 'none';
        }
    }

    // Tambahkan fungsi untuk memastikan gambar di-refresh
    function getImageUrlWithTimestamp(url) {
        const timestamp = new Date().getTime();
        if (url.includes('?')) {
            return `${url}&t=${timestamp}`;
        }
        return `${url}?t=${timestamp}`;
    }

    // Tambahkan fungsi ini di dalam bagian script
    function showSuccessAlert(message) {
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: message,
            confirmButtonColor: '#2196f3',
            confirmButtonText: 'OK',
            customClass: {
                confirmButton: 'btn btn-primary btn-lg px-4',
            },
            buttonsStyling: false,
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then(() => {
            location.reload();
        });
    }

    // Tambahkan CSS untuk container gambar
    document.head.insertAdjacentHTML('beforeend', `
        <style>
            .image-container {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 200px;
                background-color: #f8f9fa;
                border: 1px solid #dee2e6;
                border-radius: 4px;
                padding: 10px;
                margin-bottom: 10px;
            }
            
            #new_preview_image {
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
                transform-origin: center center;
            }
        </style>
    `);

    $(document).ready(function() {
        $('#kecamatan').on('change', function() {
            var kecamatanId = $(this).val();
            var desaSelect = $('#desa');
            
            // Reset pilihan desa
            desaSelect.html('<option value="">Pilih Desa</option>');
            
            if(kecamatanId) {
                // Lakukan request AJAX
                $.ajax({
                    url: "{{ route('get.desa') }}", // Anda perlu membuat route ini
                    type: 'GET',
                    data: {
                        kecamatan_id: kecamatanId
                    },
                    success: function(response) {
                        if(response.desa.length > 0) {
                            response.desa.forEach(function(item) {
                                desaSelect.append(
                                    $('<option></option>')
                                        .attr('value', item.nama_desa)
                                        .text(item.nama_desa)
                                );
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            }
        });
    });

    // Tambahkan setelah event handler kecamatan
    $('#desa').on('change', function() {
        var desa = $(this).val();
        var rwSelect = $('#rw');
        
        // Reset pilihan RW
        rwSelect.html('<option value="">Semua RW</option>');
        
        if(desa) {
            // Lakukan request AJAX untuk mendapatkan RW berdasarkan desa
            $.ajax({
                url: "{{ route('get.rw') }}", // Buat route baru untuk ini
                type: 'GET',
                data: {
                    desa: desa
                },
                success: function(response) {
                    if(response.rw.length > 0) {
                        response.rw.forEach(function(rw) {
                            rwSelect.append(
                                $('<option></option>')
                                    .attr('value', rw)
                                    .text('RW ' + rw)
                                    .prop('selected', rw == "{{ request('rw') }}")
                            );
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }
    });
    </script>

    @include('my_components.alertToast')
@endsection