@extends('master')
@section('title', 'Permukiman Kumuh')
@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;
            overflow: hidden;
            margin-bottom: 10px;
            height: 70vh;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            border: 1px solid #ddd;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform-origin: center center;
            transition: transform 0.3s ease;
        }

        .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 {
            display: block;
            max-width: 100%;
            height: auto;
            transform-origin: center center;
        }

        /* Update style untuk dropdown menu */
        .dropdown-menu {
            position: absolute !important;
            z-index: 1050;
            margin-top: 0 !important;
        }

        /* Update style untuk kolom aksi */
        .action-column {
            position: relative;
        }

        /* Update style untuk dropdown container */
        .dropdown {
            position: static;
        }

        /* Update style untuk table-responsive */
        .table-responsive {
            overflow: visible !important;
        }

        /* Tambahkan style baru untuk mencegah pergeseran */
        .table {
            width: 100% !important;
            margin-right: 0 !important;
        }

        body {
            padding-right: 0 !important;
        }

        /* Style untuk container dropdown */
        .action-dropdown-container {
            position: relative;
        }

        .action-dropdown {
            position: absolute;
            right: 0;
            min-width: 160px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,.1);
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,.15);
            z-index: 1050;
        }

        .table td {
            position: relative;
        }

        .dropdown-toggle::after {
            display: none;
        }

        .action-button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .position-relative {
            position: relative !important;
        }

        .image-container {
            position: relative;
            overflow: hidden;
            cursor: grab;
            user-select: none;
        }
        
        .image-container:active {
            cursor: grabbing;
        }
        
        .image-container img {
            transform-origin: center center;
            pointer-events: none;
        }
    </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 Kumuh</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 Kumuh</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">Data Permukiman Kumuh</h5>
            <div class="mt-2 mt-sm-0 ms-auto">
                <form action="{{ route('permukiman.kumuh') }}" 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">
                <a href="{{ route('permukiman.peta.kumuh') }}" class="btn btn-info">
                    <i class="ph-map-pin"></i>&nbsp;Peta Persebaran
                </a>
            </div>
            @php
                $tambah = explode(',', Auth::user()->role->tambah);
                $baca = explode(',', Auth::user()->role->baca);
                $ubah = explode(',', Auth::user()->role->ubah);
                $hapus = explode(',', Auth::user()->role->hapus);
            @endphp
        </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>
                            @if (in_array('23', $baca) || in_array('22', $ubah) || in_array('22', $hapus))
                                <th class="text-center">Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($kumuh as $k)
                            <tr>
                                <td>{{ ($kumuh->currentPage() - 1) * $kumuh->perPage() + $loop->iteration }}</td>
                                <td>{{ $k->permukiman->kepala_keluarga ?? '-' }}</td>
                                <td>{{ $k->permukiman->alamat ?? '-' }}</td>
                                <td>{{ $k->rt ?? '-' }}/{{ $k->rw ?? '-' }}</td>
                                <td>{{ $k->desa ?? '-' }}</td>
                                <td>{{ $k->kecamatan ?? '-' }}</td>
                                @if (in_array('23', $baca) || in_array('22', $ubah) || in_array('22', $hapus))
                                    <td class="text-center action-column">
                                        <div class="action-dropdown-container">
                                            <div class="dropdown">
                                                <a href="#" class="text-body" data-bs-toggle="dropdown">
                                                    <i class="ph-list"></i>
                                                </a>
                                                <div class="dropdown-menu action-dropdown">
                                                    @if (in_array('23', $baca))
                                                        <button onclick="showDetail('{{ $k->id }}')" class="dropdown-item">
                                                            <i class="ph-eye me-2"></i>
                                                            Detail
                                                        </button>
                                                    @endif
                                                    @if (in_array('22', $ubah))
                                                        <button onclick="editKumuh('{{ $k->id }}')" class="dropdown-item">
                                                            <i class="ph-note-pencil me-2"></i>
                                                            Edit
                                                        </button>
                                                    @endif
                                                    @if (in_array('22', $hapus))
                                                        <button onclick="hapus('{{ $k->id }}', '{{ $k->permukiman->kepala_keluarga }}')" class="dropdown-item">
                                                            <i class="ph-trash me-2"></i>
                                                            Hapus
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{ $kumuh->appends(['kecamatan' => request()->kecamatan])->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.kumuh.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'))
                                @php
                                    $desaList = App\Models\Desa::where('id_kecamatan', request('kecamatan'))->get();
                                @endphp
                                @foreach($desaList 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_detail" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Permukiman Kumuh</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="text-center mb-3">
                        <img id="detail_foto" class="img-fluid rounded d-none" style="max-height: 300px;" alt="Foto Permukiman">
                        <p id="foto_tidak_tersedia" class="text-muted mt-2">Foto tidak tersedia</p>
                    </div>
                    <h6 class="fw-bold">Data Permukiman</h6>
                    <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"></span>/<span id="detail_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>

                    <h6 class="fw-bold mt-4">Data Kelayakan</h6>
                    <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">Status Kelayakan</label>
                        <div class="col-sm-8">
                            <span id="detail_status_kelayakan"></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_edit" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Permukiman Kumuh</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form id="form_edit" action="{{ route('permukiman.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="edit_id" name="id">
                    <input type="hidden" name="current_rotation" id="current_rotation_angle" value="0">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <h6 class="fw-bold mb-3">Data Permukiman</h6>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Kepala Keluarga</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_kepala_keluarga" name="kepala_keluarga" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">NIK</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_nik" name="nik">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Alamat</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_alamat" name="alamat">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">RT/RW</label>
                                    <div class="col-sm-8">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="edit_rt" name="rt" placeholder="RT">
                                            </div>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="edit_rw" name="rw" placeholder="RW">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Dusun</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_dusun" name="dusun">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Desa</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_desa" name="desa">
                                            <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="Mojorejo">Mojorejo</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-4 col-form-label">Kecamatan</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_kecamatan" name="kecamatan">
                                            @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-4 col-form-label">Jumlah KK</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_jumlah_kk" name="jumlah_kk">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Pekerjaan</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_pekerjaan" name="pekerjaan">
                                            <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-4 col-form-label">Penghasilan</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_penghasilan" name="penghasilan">
                                            <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-4 col-form-label">Status Kepemilikan Tanah</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_status_kepemilikan_tanah" name="status_kepemilikan_tanah">
                                            <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-4 col-form-label">Status Kepemilikan Rumah</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_status_kepemilikan_rumah" name="status_kepemilikan_rumah">
                                            <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-4 col-form-label">Luas Rumah (m2)</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_luas_rumah" name="luas_rumah">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Jumlah Penghuni</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="edit_jumlah_penghuni" name="jumlah_penghuni">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Jenis Bangunan</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_jenis_bangunan" name="jenis_bangunan">
                                            <option value="Permanen">Permanen</option>
                                            <option value="Semi Permanen">Semi Permanen</option>
                                            <option value="Tidak Permanen">Tidak Permanen</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <h6 class="fw-bold mb-3">Data Kelayakan</h6>
                                <div class="row mb-3">
                                    <label class="col-sm-4 col-form-label">Atap</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_atap" name="atap">
                                            <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-4 col-form-label">Dinding</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_dinding" name="dinding">
                                            <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-4 col-form-label">Lantai</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_lantai" name="lantai">
                                            <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-4 col-form-label">Jendela</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_jendela" name="jendela">
                                            <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-4 col-form-label">Ventilasi</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_ventilasi" name="ventilasi">
                                            <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-4 col-form-label">Sanitasi</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_sanitasi" name="sanitasi">
                                            <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-4 col-form-label">Sumber Air Bersih</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_sumber_air_bersih" name="sumber_air_bersih">
                                            <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-4 col-form-label">Sumber Listrik</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_sumber_listrik" name="sumber_listrik">
                                            <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-4 col-form-label">Akses Jalan</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="edit_akses_jalan" name="akses_jalan">
                                            <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-4 col-form-label">Jenis Rumah</label>
                                    <div class="col-sm-8">
                                        <select class="form-select" name="rumah" id="edit_rumah">
                                            <option value="">Pilih Status Rumah</option>
                                            <option value="1">Rumah</option>
                                            <option value="0">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>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script>
        // Deklarasikan variabel editMap di scope global
        let editMap;

        $(function() {
            // Hapus inisialisasi DataTable yang ada
            // Biarkan tabel berfungsi sebagai tabel HTML biasa
        });

        function showDetail(id) {
            $.ajax({
                url: "{{ route('permukiman.kumuh.show', ['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;

                        // Reset tampilan foto
                        $('#detail_foto').addClass('d-none');
                        $('#foto_tidak_tersedia').removeClass('d-none');

                        // 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', 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;
                        
                        // Data Permukiman
                        $('#detail_id').text(data.id || '-');
                        $('#detail_kepala_keluarga').text(data.kepala_keluarga || '-');
                        $('#detail_nik').text(data.nik || '-');
                        $('#detail_alamat').text(data.alamat || '-');
                        $('#detail_rt').text(data.rt || '-');
                        $('#detail_rw').text(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 || '-');

                        // Data Kelayakan
                        $('#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 || '-');

                        // Status kelayakan dengan badge
                        const statusBadgeColor = {
                            'Layak': 'success',
                            'Tidak Layak': 'danger',
                            'Kurang Layak': 'warning'
                        };
                        const badgeColor = statusBadgeColor[data.layak] || 'secondary';
                        $('#detail_status_kelayakan').html(`<span class="badge bg-${badgeColor}">${data.layak || '-'}</span>`);

                        // 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 editKumuh(id) {
            $.ajax({
                url: "{{ route('permukiman.kumuh.show', ['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;
                        // Isi form dengan data yang diterima
                        $('#edit_id').val(id);
                        $('#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_layak').val(data.layak);
                        $('#edit_rumah').val(data.rumah);
                        
                        // Set nilai latitude dan longitude
                        $('#edit_latitude').val(data.latitude);
                        $('#edit_longitude').val(data.longitude);

                        // Preview foto yang ada
                        var fotoUrl = "/sinar/storage/app/public/foto_permukiman/" + id + ".jpeg";
                        var img = new Image();
                        img.onload = function() {
                            const container = document.querySelector('#edit_foto_preview .image-container');
                            container.innerHTML = `
                                <img src="${fotoUrl}" 
                                     class="img-fluid" 
                                     style="width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform 0.3s ease;" 
                                     data-rotation="0">
                            `;
                            // Inisialisasi zoom untuk foto saat ini
                            initZoom(container);
                            
                            // Tampilkan tombol rotasi
                            document.getElementById('rotate_buttons').style.display = 'block';
                        };
                        img.onerror = function() {
                            const container = document.querySelector('#edit_foto_preview .image-container');
                            container.innerHTML = '<div class="alert alert-info">Foto tidak tersedia</div>';
                            document.getElementById('rotate_buttons').style.display = 'none';
                        };
                        img.src = fotoUrl;

                        // Tampilkan modal edit
                        $('#modal_form_edit').modal('show');
                    }
                },
                error: function(xhr, status, error) {
                    Swal.close();
                    console.error('Error:', xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat mengambil data: ' + error
                    });
                }
            });
        }
        // Inisialisasi peta setelah modal ditampilkan
        var modalEdit = new bootstrap.Modal(document.getElementById('modal_form_edit'));
        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 });

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


        // Handle form submit
        $('#form_edit').on('submit', function(e) {
            e.preventDefault();
            
            var formData = new FormData(this);
            var id = $('#edit_id').val();
            
            // Tambahkan proses rotasi gambar yang ada sebelum submit
            const currentRotation = parseInt($('#current_rotation_angle').val()) || 0;
            if (currentRotation !== 0) {
                const container = document.querySelector('#edit_foto_preview .image-container');
            const img = container.querySelector('img');
                
                if (img) {
                    // Buat canvas untuk merotasi gambar
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    
                    // Buat image baru untuk memproses
                    const tempImg = new Image();
                    tempImg.src = img.src;
                    
                    tempImg.onload = function() {
                        // Sesuaikan ukuran canvas dengan orientasi gambar
                        if (currentRotation === 90 || currentRotation === 270) {
                            canvas.width = tempImg.height;
                            canvas.height = tempImg.width;
            } else {
                            canvas.width = tempImg.width;
                            canvas.height = tempImg.height;
                        }
                        
                        // Translasi dan rotasi
                        ctx.translate(canvas.width/2, canvas.height/2);
                        ctx.rotate(currentRotation * Math.PI/180);
                        ctx.drawImage(tempImg, -tempImg.width/2, -tempImg.height/2);
                        
                        // Konversi canvas ke blob
                        canvas.toBlob(function(blob) {
                            // Tambahkan blob ke FormData dengan nama khusus
                            formData.append('rotated_current_image', blob, id + '.jpeg');
                            
                            // Lanjutkan dengan pengiriman data
                            submitForm(formData);
                        }, 'image/jpeg', 0.95);
                    };
                    return; // Hentikan eksekusi untuk menunggu proses rotasi
                }
            }
            
            // Jika tidak ada rotasi, langsung submit
            submitForm(formData);
        });

        function submitForm(formData) {
            $.ajax({
                url: $('#form_edit').attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    Swal.fire({
                        title: 'Menyimpan Data...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    if (response.success) {
                        showSuccessAlert(response.message);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat menyimpan data: ' + error
                    });
                }
            });
        }

        function hapus(id, nama) {
            Swal.fire({
                title: '<div class="mb-3"><i class="ph-trash-simple text-danger display-5"></i></div>Konfirmasi Hapus',
                html: `<div class="fs-5">Apakah Anda yakin ingin menghapus data permukiman<br><strong>${nama}</strong>?</div>`,
                icon: false,
                showCancelButton: true,
                confirmButtonText: '<i class="ph-trash me-2"></i>Ya, Hapus',
                cancelButtonText: '<i class="ph-x-circle me-2"></i>Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                customClass: {
                    confirmButton: 'btn btn-danger btn-lg',
                    cancelButton: 'btn btn-secondary btn-lg',
                    title: 'fs-3 mb-2',
                    popup: 'animate__animated animate__fadeInDown'
                },
                buttonsStyling: false,
                reverseButtons: true,
                width: '35em',
                padding: '2em',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('/permukiman/hapus') }}/" + id,
                        type: "DELETE",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        beforeSend: function() {
                            Swal.fire({
                                title: 'Menghapus Data...',
                                text: 'Mohon tunggu sebentar',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: response.message,
                                    showConfirmButton: false,
                                    timer: 1500
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: response.message
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Terjadi kesalahan saat menghapus data: ' + error
                            });
                        }
                    });
                }
            });
        }

        // Tambahkan link CSS untuk animasi
        document.head.insertAdjacentHTML('beforeend', `
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
        `);

        // Fungsi showSuccessAlert yang diperbaharui
        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 fungsi zoom untuk foto saat ini
        function initZoom(container) {
            let scale = 1;
            let panning = false;
            let pointX = 0;
            let pointY = 0;
            let start = { x: 0, y: 0 };

            const img = container.querySelector('img');
            if (!img) return;

            // Zoom dengan mouse wheel
            container.addEventListener('wheel', (e) => {
                e.preventDefault();
                const xs = (e.clientX - container.getBoundingClientRect().left) / scale;
                const ys = (e.clientY - container.getBoundingClientRect().top) / scale;
                
                const delta = e.deltaY > 0 ? 0.9 : 1.1;
                scale *= delta;
                // Batasi zoom
                scale = Math.min(Math.max(1, scale), 4);
                
                pointX = xs * scale - xs;
                pointY = ys * scale - ys;
                
                img.style.transform = `translate(${-pointX}px, ${-pointY}px) scale(${scale}) rotate(${img.getAttribute('data-rotation') || 0}deg)`;
            });

            // Pan dengan mouse drag
            container.addEventListener('mousedown', (e) => {
                e.preventDefault();
                start = { x: e.clientX - pointX, y: e.clientY - pointY };
                panning = true;
            });

            container.addEventListener('mousemove', (e) => {
                e.preventDefault();
                if (!panning) return;
                
                pointX = (e.clientX - start.x);
                pointY = (e.clientY - start.y);
                
                img.style.transform = `translate(${-pointX}px, ${-pointY}px) scale(${scale}) rotate(${img.getAttribute('data-rotation') || 0}deg)`;
            });

            container.addEventListener('mouseup', () => {
                panning = false;
            });

            // Reset zoom dengan double click
            container.addEventListener('dblclick', (e) => {
                e.preventDefault();
                scale = 1;
                pointX = 0;
                pointY = 0;
                img.style.transform = `rotate(${img.getAttribute('data-rotation') || 0}deg)`;
            });
        }

        // Modifikasi fungsi previewNewImage untuk menambahkan zoom
        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 = 'img-fluid';
                    img.style.width = '100%';
                    img.style.height = '100%';
                    img.style.objectFit = 'contain';
                    img.style.transition = 'transform 0.3s ease';
                    img.setAttribute('data-rotation', '0');
                    container.appendChild(img);
                    
                    // Inisialisasi zoom untuk foto baru
                    initZoom(container);
                    
                    // Tampilkan tombol rotasi setelah gambar dimuat
                    document.getElementById('new_rotate_buttons').style.display = 'block';
                    document.getElementById('new_rotation_angle').value = '0';
                }
                
                reader.readAsDataURL(input.files[0]);
            } else {
                container.innerHTML = '<p class="text-muted">Tidak ada foto yang dipilih</p>';
                document.getElementById('new_rotate_buttons').style.display = 'none';
            }
        }

        // Perbaikan fungsi rotasi foto baru
        function rotateNewImage(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;
        }

        // Tambahkan CSS untuk mendukung zoom
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                .image-container {
                    position: relative;
                    overflow: hidden;
                    cursor: grab;
                    user-select: none;
                }
                
                .image-container:active {
                    cursor: grabbing;
                }
                
                .image-container img {
                    transform-origin: center center;
                    pointer-events: none;
                }
            </style>
        `);

        // Tambahkan fungsi untuk merotasi foto saat ini
        function rotateImage(direction) {
            const container = document.querySelector('#edit_foto_preview .image-container');
            const img = container.querySelector('img');
            if (!img) return;

            let currentRotation = parseInt(img.getAttribute('data-rotation') || '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)`;
            img.setAttribute('data-rotation', currentRotation);
            
            // Simpan nilai rotasi untuk dikirim ke server
            document.getElementById('current_rotation_angle').value = currentRotation;
        }
        $(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>
    </script>

    @include('my_components.alertToast')
@endsection