@extends('layouts.frontend.master')
@section('content')
    @php
        $anim = 1;
    @endphp
    <section data-anim-wrap class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <div class="breadcrumbs__content">

                        <div class="breadcrumbs__item " data-anim-child="slide-left delay-{{ $anim++ }}">
                            <a href="{{ route('home') }}">Utama</a>
                        </div>

                        <div class="breadcrumbs__item " data-anim-child="slide-left delay-{{ $anim++ }}">
                            <a href="{{ route('penduduk') }}">Penduduk</a>
                        </div>

                        <div class="breadcrumbs__item ">
                            <a href="javascript:void(0)" data-anim-child="slide-left delay-{{ $anim++ }}">Detail</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @php
        $anim = 1;
    @endphp
    <section data-anim-wrap class="page-header -type-3 ">
        <div class="page-header__bg bg-red-1 "></div>
        <div class="container">
            <div class="row justify-center">
                <div class="col-xl-8 col-lg-9 col-md-11">
                    <div class="page-header__content">
                        <div class="page-header__img" data-anim-child="slide-left delay-{{ $anim++ }}">
                            <img onerror="this.src='{{ $penduduk->fotoUrlDefault() }}';this.onerror='';"
                                src="{{ $penduduk->fotoUrl() }}" alt="{{ $penduduk->nama }}"
                                style="margin: auto;position: relative;margin: auto;width: 150px;height: 150px;max-height: 150px;border-radius: 150px;object-fit: cover;
                                 /* cover, contain, fill, scale-down */
                                 object-position: center; border: 5px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); -webkit-border-radius: 150px;-moz-border-radius: 150px;">
                        </div>

                        <div class="page-header__info pt-20" data-anim-child="slide-right delay-{{ $anim++ }}">
                            <h1 class="text-30 lh-14 fw-700 text-white">{{ $penduduk->nama }}</h1>
                            @if ($user->username)
                                <div style="color: black">{{ '@' . $user->username }}</div>
                            @endif
                            @if ($penduduk->bio)
                                <div class="d-flex x-gap-20 pt-15">
                                    <div class="d-flex items-center text-white">
                                        <i class="fas fa-user-edit mr-10"></i>
                                        <div class="text-13 lh-1">{{ $penduduk->bio }}</div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="d-md-flex items-center mt-30">
                            @if ($penduduk->whatsapp)
                                <a href="https://wa.me/+62{{ $penduduk->whatsapp }}" class="button -md -green-1 text-dark-1"
                                    data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-whatsapp mr-10"></i>Whatsapp
                                </a>
                            @elseif ($penduduk->telepon)
                                <a href="tel:{{ $penduduk->whatsapp }}" class="button -md -green-1 text-dark-1"
                                    data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fas fa-phone mr-10"></i>Telepon
                                </a>
                            @else
                                <p class=" text-white" data-anim-child="slide-left delay-{{ $anim++ }}">Share
                                    Profile: </p>
                            @endif

                            <div class="d-flex items-center x-gap-15 text-white ml-25 social-media-container">
                                @php
                                    $user_link = $user->username ? url($user->username) : route('penduduk.id', $user->id);
                                @endphp
                                <a target="_blank" href="https://www.facebook.com/sharer.php?u={{ $user_link }}"
                                    title="Share To Facebook" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-facebook-f text-white"></i>
                                </a>
                                <a target="_blank"
                                    href="https://api.whatsapp.com/send?text={{ $user_link }} {{ $user->name }}"
                                    title="Share To Whatsapp" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-whatsapp text-white"></i>
                                </a>
                                <a target="_blank"
                                    href="https://twitter.com/share?url={{ $user_link }}&text={{ $user->name }}"
                                    title="Share To Twitter" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-twitter text-white"></i></a>
                                <a target="_blank"
                                    href="https://www.linkedin.com/shareArticle?mini=true&url={{ $user_link }}&title={{ $user->name }}&summary={{ $user->bio }}"
                                    title="Share To Linkedin" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-linkedin-in text-white"></i>
                                </a>
                                <a target="_blank"
                                    href="https://telegram.me/share/url?url={{ $user_link }}&text={{ $user->name }}"
                                    title="Share To Telegram" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="fab fa-telegram-plane text-white"></i>
                                </a>
                                <a target="_blank"
                                    href="mailto:?subject={{ $user->name }}&body=Check out this site: {{ $user_link }}"
                                    title="Share Via Email" data-anim-child="slide-left delay-{{ $anim++ }}">
                                    <i class="far fa-envelope text-white"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @php
        $anim = 1;
    @endphp
    <section data-anim-wrap class="layout-pt-md layout-pb-lg">
        <div class="container bg-light-4 p-2 rounded-16">
            <div class="grid">

                <div class="grid-sizer col-xl-4 col-md-6 col-12"></div>

                <div class="grid-item col-xl-4 col-md-6 col-12 " data-anim-child="slide-left delay-{{ $anim++ }}">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                            <h2 class="text-17 fw-500">Tentang</h2>
                        </div>
                        <div class="py-30 px-30">
                            <div class="y-gap-40">
                                @php $border_top = false; @endphp
                                @if ($penduduk->nomor_kk)
                                    <div class="ml-10 w-1/1" data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Nomor KK (Kartu Keluarga)</h4>
                                        <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                            <div class="d-flex items-center">
                                                <div class="text-13 lh-1">
                                                    <a href="{{ url('penduduk?search=' . $penduduk->nomor_kk) }}"
                                                        class="text-purple-1">
                                                        {{ $penduduk->nomor_kk }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $border_top = true; @endphp
                                @endif
                                @if ($penduduk->nomor_ktp)
                                    <div class="ml-10 w-1/1" data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Nomor KTP (Kartu Tanda Penduduk)</h4>
                                        <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                            <div class="d-flex items-center">
                                                <div class="text-13 lh-1">
                                                    <a href="{{ url('penduduk?search=' . $penduduk->nomor_ktp) }}"
                                                        class="text-purple-1">
                                                        {{ $penduduk->nomor_ktp }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $border_top = true; @endphp
                                @endif

                                @if ($penduduk->profesi)
                                    <div class="ml-10 w-1/1  {{ $border_top ? 'border-top-light' : '' }}"
                                        data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Profesi Sekarang</h4>
                                        <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                            <div class="d-flex items-center">
                                                <div class="text-13 lh-1">
                                                    <a href="{{ url('penduduk?search=' . $penduduk->profesi) }}"
                                                        class="text-purple-1">
                                                        {{ $penduduk->profesi }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $border_top = true; @endphp
                                @endif

                                @if ($penduduk->jenis_kelamin)
                                    <div class="ml-10 w-1/1  {{ $border_top ? 'border-top-light' : '' }}"
                                        data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Jenis Kelamin</h4>
                                        <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                            <div class="d-flex items-center">
                                                <div class="text-13 lh-1">
                                                    <a href="{{ url('penduduk?search=' . $penduduk->jenis_kelamin) }}"
                                                        class="text-purple-1">
                                                        {{ $penduduk->jenis_kelamin }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $border_top = true; @endphp
                                @endif

                                @if (
                                    $penduduk->alamat_lengkap ||
                                        $penduduk->province_id ||
                                        $penduduk->regency_id ||
                                        $penduduk->district_id ||
                                        $penduduk->village_id)
                                    <div class="ml-10 w-1/1  {{ $border_top ? 'border-top-light' : '' }}"
                                        data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Alamat</h4>
                                        <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                            <div class="d-flex items-center">
                                                <div class="text-13">
                                                    @php
                                                        $province = $penduduk->province ? '<a class="text-purple-1" href="' . url('penduduk?search=' . $penduduk->province->name) . '">' . $penduduk->province->name . '</a>' : '';
                                                        $regencie = $penduduk->regencie ? '<a class="text-purple-1" href="' . url('penduduk?search=' . $penduduk->regencie->name) . '">' . $penduduk->regencie->name . '</a>' : '';
                                                        $district = $penduduk->district ? '<a class="text-purple-1" href="' . url('penduduk?search=' . $penduduk->district->name) . '">' . $penduduk->district->name . '</a>' : '';
                                                        $village = $penduduk->village ? '<a class="text-purple-1" href="' . url('penduduk?search=' . $penduduk->village->name) . '">' . $penduduk->village->name . '</a>' : '';

                                                        $alamat_lengkap = '';
                                                        $alamat_lengkap .= $alamat_lengkap == '' ? $penduduk->alamat_lengkap : '';
                                                        $alamat_lengkap .= $alamat_lengkap == '' ? $province : ($province == '' ? '' : ", $province");
                                                        $alamat_lengkap .= $alamat_lengkap == '' ? $regencie : ($regencie == '' ? '' : ", $regencie");
                                                        $alamat_lengkap .= $alamat_lengkap == '' ? $district : ($district == '' ? '' : ", $district");
                                                        $alamat_lengkap .= $alamat_lengkap == '' ? $village : ($village == '' ? '' : ", $village");
                                                    @endphp
                                                    {!! $alamat_lengkap !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $border_top = true; @endphp
                                @endif

                                @if ($penduduk->lokasi_id)
                                    <div class="ml-10 w-1/1 {{ $border_top ? 'border-top-light' : '' }}"
                                         data-anim-child="slide-left delay-{{ $anim++ }}">
                                        <h4 class="text-15 lh-1 fw-500">Titik Lokasi Domisili</h4>
                                        <div class="pt-10" style="height: 300px;">
                                            <div id="map-domisili" style="width: 100%; height: 100%; border-radius: 8px; background-color: #eee;"></div>
                                        </div>
                                        <div class="mt-10 text-13">
                                            <div id="keterangan-lokasi">{{ $penduduk->lokasi->keterangan_lokasi ?? '' }}</div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                @if ($penduduk->whatsapp || $penduduk->telepon || $penduduk->kontaks()->count() > 0)
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Kontak</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">
                                    @php $border_top = false; @endphp

                                    @if ($penduduk->telepon)
                                        <div class="ml-10 w-1/1" data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500"><i class="fas fa-phone me-2"></i> Telepon</h4>
                                            <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="d-flex items-center">
                                                    <div class="text-13 lh-1">
                                                        <a class="text-purple-1" href="tel:{{ $penduduk->telepon }}"
                                                            target="_blank">
                                                            {{ $penduduk->telepon }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @php $border_top = true; @endphp
                                    @endif

                                    @if ($penduduk->whatsapp)
                                        <div class="ml-10 w-1/1 {{ $border_top ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500"><i class="fab fa-whatsapp me-2"></i> Whatsapp
                                            </h4>
                                            <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="d-flex items-center">
                                                    <div class="text-13 lh-1">
                                                        <a class="text-purple-1"
                                                            href="https://wa.me/+62{{ $penduduk->whatsapp }}"
                                                            target="_blank">
                                                            +62{{ $penduduk->whatsapp }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @php $border_top = true; @endphp
                                    @endif

                                    @foreach ($penduduk->kontaks()->with('jenis')->get() as $kontak)
                                        <div class="ml-10 w-1/1  {{ $border_top ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500">
                                                <i class="{{ $kontak->jenis->icon }} me-2"></i>
                                                {{ $kontak->jenis->nama }}
                                            </h4>
                                            <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="d-flex items-center">
                                                    <div class="text-13 lh-1">
                                                        <a class="text-purple-1" href="{{ $kontak->nilai }}"
                                                            target="_blank">
                                                            {{ $kontak->nilai }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif


                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <!-- Header -->
                        <div class="d-flex justify-between items-center py-15 px-20 border-bottom-light bg-light-2">
                            <h2 class="text-14 fw-500">JAMINAN SOSIAL (BPJS)</h2>
                            <span class="text-12">STATUS: AKTIF</span>
                        </div>

                        <!-- Body -->
                        <div class="py-20 px-20">
                            <!-- BPJS Kesehatan -->
                            <div class="mb-15">
                                <div class="d-flex justify-between items-center mb-10">
                                    <div class="text-13 fw-500 text-dark-1">
                                        <i class="fas fa-heartbeat me-2 text-danger"></i>BPJS Kesehatan
                                    </div>
                                    <div class="badge bg-success text-11">Aktif</div>
                                </div>
                                <div class="text-12 text-dark-1">
                                    No. Kartu: <span class="fw-500">0001234567890</span>
                                </div>
                                <div class="text-12 text-dark-1 mt-5">
                                    Kelas: <span class="fw-500">III</span>
                                </div>
                            </div>

                            <div class="border-top-light my-10"></div>

                            <!-- BPJS Ketenagakerjaan -->
                            <div class="">
                                <div class="d-flex justify-between items-center mb-10">
                                    <div class="text-13 fw-500 text-dark-1">
                                        <i class="fas fa-briefcase me-2 text-primary"></i>BPJS Ketenagakerjaan
                                    </div>
                                    <div class="badge bg-success text-11">Aktif</div>
                                </div>
                                <div class="text-12 text-dark-1">
                                    No. Kartu: <span class="fw-500">0012345678901</span>
                                </div>
                                <div class="text-12 text-dark-1 mt-5">
                                    Program: <span class="fw-500">JKK + JKM</span>
                                </div>
                            </div>

                            <!-- Catatan -->
                            <div class="border-top-light pt-10 mt-15">
                                <div class="text-11 text-dark-1">
                                    <i class="fas fa-info-circle me-1"></i> Terdaftar sejak: Januari 2022
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                @if ($penduduk->pendudukKepengurusans()->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Riwayat Kepengurusan</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->frontendDetailKepengurusans() as $k => $item)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap">
                                                <div class="d-flex items-center">
                                                    <div class="text-13">
                                                        <a class="text-purple-1"
                                                            href="{{ url('penduduk?search=' . $item->sampai) }}">
                                                            {{ $item->sampai }}
                                                        </a>
                                                        -
                                                        <a class="text-purple-1"
                                                            href="{{ url('penduduk?search=' . $item->dari) }}">
                                                            {{ $item->dari }}
                                                        </a>
                                                        |
                                                        @if ($item->bidang)
                                                            <a class="text-purple-1"
                                                                href="{{ route('tentang.kepengurusan.bidang', $item->slug_bidang) }}">
                                                                {{ $item->jabatan }}
                                                                {{ $item->bidang ? '->' . ' ' . $item->bidang : '' }}
                                                            </a>
                                                        @else
                                                            {{ $item->jabatan }}
                                                        @endif
                                                        |
                                                        <a class="text-purple-1"
                                                            href="{{ route('tentang.kepengurusan.struktur.periode', $item->periode_slug) }}">
                                                            {{ $item->periode }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($penduduk->pendidikans()->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Riwayat Pendidikan</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->pendidikans()->orderBy('dari', 'desc')->get() as $k => $pendidikan)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500">
                                                <a class="text-purple-1"
                                                    href="{{ url('penduduk?search=') . $pendidikan->instansi }}">
                                                    {{ $pendidikan->instansi }}
                                                </a>
                                            </h4>
                                            <div class="d-flex flex-column x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="text-13">
                                                    {{ $pendidikan->dari }} -
                                                    {{ $pendidikan->sampai ? $pendidikan->sampai : 'sekarang' }}
                                                </div>
                                                @if ($pendidikan->jurusan)
                                                    <div class="text-13">{{ $pendidikan->jurusan }}</div>
                                                @endif
                                                @if ($pendidikan->keterangan)
                                                    <div class="text-13">{{ $pendidikan->keterangan }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($penduduk->pengalamanKerjas->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Pengalaman Kerja</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->pengalamanKerjas as $k => $item)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500">
                                                {{ $item->nama }}
                                            </h4>
                                            <div class="d-flex flex-column x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="text-13">
                                                    {{ $item->dari }} -
                                                    {{ $item->sampai ? $item->sampai : 'sekarang' }}
                                                </div>
                                                @if ($item->jabatan)
                                                    <div class="text-13">{{ $item->jabatan }}</div>
                                                @endif
                                                @if ($item->keterangan)
                                                    <div class="text-13">{{ $item->keterangan }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <!-- Header -->
                        <div class="d-flex justify-between items-center py-15 px-20 border-bottom-light">
                            <h2 class="text-14 fw-500">POHON KELUARGA</h2>
                            <span class="text-12">KK: {{ $penduduk->no_kk ?? 'N/A' }}</span>
                        </div>

                        <!-- Body -->
                        <div class="py-20 px-20">
                            <!-- Generasi 1 (Kakek/Nenek) dari Ayah & Ibu -->
                            <div class="text-center mb-15">
                                <div class="d-flex justify-center gap-30">
                                    <!-- Cabang Ayah -->
                                    <div>
                                        <!-- GEN 1: Kakek/Nenek dari Ayah -->
                                        <div class="d-flex justify-center mb-1">
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Kakek</div>
                                                <div class="text-11">Belum Di Input</div>
                                            </div>
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Nenek</div>
                                                <div class="text-11">Belum Di Input</div>
                                            </div>
                                        </div>
                                        <div class="family-connector"></div>
                                        <!-- GEN 2: Ayah -->
                                        <div class="d-flex justify-center mt-1">
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Ayah</div>
                                                <div class="text-11">JHONNY CORNELIS MANDAGI</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Cabang Ibu -->
                                    <div>
                                        <!-- GEN 1: Kakek/Nenek dari Ibu -->
                                        <div class="d-flex justify-center mb-1">
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Kakek</div>
                                                <div class="text-11">(Alm.) FRANS LOLONG</div>
                                            </div>
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Nenek</div>
                                                <div class="text-11">(Almh.) DORCAS SUPIT</div>
                                            </div>
                                        </div>
                                        <div class="family-connector"></div>
                                        <!-- GEN 2: Ibu -->
                                        <div class="d-flex justify-center mt-1">
                                            <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                                <div class="fw-500">Ibu</div>
                                                <div class="text-11">(Almh.) MARTHA MARIA LOLONG</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Connector ke Anda -->
                                <div class="family-connector my-2"></div>

                                <!-- GEN 3: Anda dan Pasangan -->
                                <div class="d-flex justify-center mb-1">
                                    <div class="family-node text-12 p-2 mx-1 rounded-8 bg-primary">
                                        <div class="fw-500 text-danger">Anda</div>
                                        <div class="text-11 text-danger">{{ $penduduk->nama ?? 'Diri Sendiri' }}</div>
                                    </div>
                                    <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                        <div class="fw-500">Pasangan</div>
                                        <div class="text-11">MEIDI BERNADET KEMBUAN</div>
                                    </div>
                                </div>

                                <!-- GEN 4: Anak -->
                                <div class="family-connector my-1"></div>
                                <div class="d-flex justify-center">
                                    <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                        <div class="fw-500">Anak</div>
                                        <div class="text-11">ABIGAIL KAITLYN NATANIELA MANDAGI</div>
                                    </div>
                                    <div class="family-node text-12 p-2 mx-1 rounded-8 bg-light-2">
                                        <div class="fw-500">Anak</div>
                                        <div class="text-11">AGATHA CALLYSTA FEODORA MANDAGI</div>
                                    </div>
                                </div>
                            </div>


                            <!-- Legenda -->
                            <div class="border-top-light pt-10 mt-15">
                                <div class="d-flex justify-between text-11">
                                    <span><span class="badge bg-primary me-1">&nbsp;</span> Anda</span>
                                    <span><span class="badge bg-light-2 me-1">&nbsp;</span> Keluarga</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                @if ($penduduk->pengalamanOrganisasis->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Pengalaman Organisasi</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->pengalamanOrganisasis as $k => $item)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <h4 class="text-15 lh-1 fw-500">
                                                {{ $item->nama }}
                                            </h4>
                                            <div class="d-flex flex-column x-gap-20 y-gap-10 flex-wrap pt-10">
                                                <div class="text-13">
                                                    {{ $item->dari }} -
                                                    {{ $item->sampai ? $item->sampai : 'sekarang' }}
                                                </div>
                                                @if ($item->jabatan)
                                                    <div class="text-13">{{ $item->jabatan }}</div>
                                                @endif
                                                @if ($item->keterangan)
                                                    <div class="text-13">{{ $item->keterangan }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($penduduk->pengalamanLains->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Pengalaman Lain</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->pengalamanLains as $k => $item)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <div class="text-13">{{ $item->pengalaman }}</div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($penduduk->hobis->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Hobi</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->hobis as $k => $item)
                                        <a class="button -dark-1 -rounded text-white"
                                            href="{{ url('penduduk?search=' . $item->nama) }}"
                                            style="
                                            border-radius: 16px;
                                            padding: 8px;
                                            position: relative;
                                            display: inline-block;
                                            margin-left: 8px !important;
                                            margin-bottom: 8px;
                                            font-size: 0.8em;
                                        "
                                            data-anim-child="slide-left delay-{{ $anim++ }}">{{ $item->nama }}
                                        </a>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($penduduk->pendudukKepengurusans()->count())
                    <div class="grid-item col-xl-4 col-md-6 col-12"
                        data-anim-child="slide-left delay-{{ $anim++ }}">
                        <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                            <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                                <h2 class="text-17 fw-500">Riwayat Bantuan Pemerintah</h2>
                            </div>
                            <div class="py-30 px-30">
                                <div class="y-gap-40">

                                    @foreach ($penduduk->frontendDetailKepengurusans() as $k => $item)
                                        <div class="ml-10 w-1/1 {{ $k > 0 ? 'border-top-light' : '' }}"
                                            data-anim-child="slide-left delay-{{ $anim++ }}">
                                            <div class="d-flex items-center x-gap-20 y-gap-10 flex-wrap">
                                                <div class="d-flex items-center">
                                                    <div class="text-13">
                                                        <a class="text-purple-1"
                                                            href="{{ url('penduduk?search=' . $item->sampai) }}">
                                                            {{ $item->sampai }}
                                                        </a>
                                                        -
                                                        <a class="text-purple-1"
                                                            href="{{ url('penduduk?search=' . $item->dari) }}">
                                                            {{ $item->dari }}
                                                        </a>
                                                        |
                                                        @if ($item->bidang)
                                                            <a class="text-purple-1"
                                                                href="{{ route('tentang.kepengurusan.bidang', $item->slug_bidang) }}">
                                                                {{ $item->jabatan }}
                                                                {{ $item->bidang ? '->' . ' ' . $item->bidang : '' }}
                                                            </a>
                                                        @else
                                                            {{ $item->jabatan }}
                                                        @endif
                                                        |
                                                        <a class="text-purple-1"
                                                            href="{{ route('tentang.kepengurusan.struktur.periode', $item->periode_slug) }}">
                                                            {{ $item->periode }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif


                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                            <h2 class="text-17 fw-500">Jenis Penghasilan</h2>
                        </div>
                        <div class="py-30 px-30">
                            <div class="y-gap-20">
                                <!-- Penghasilan Utama -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Penghasilan Utama
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Rp 5.000.000 - Rp 10.000.000
                                    </div>
                                </div>

                                <!-- Sumber Penghasilan Utama -->
                                <div class="text-14 text-dark-1 py-5 pl-20">
                                    - Gaji Pokok, Tunjangan, Bonus
                                </div>

                                <div class="border-top-light my-10"></div>

                                <!-- Penghasilan Tambahan -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Penghasilan Tambahan
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Rp 1.000.000 - Rp 3.000.000
                                    </div>
                                </div>

                                <!-- Sumber Penghasilan Tambahan -->
                                <div class="text-14 text-dark-1 py-5 pl-20">
                                    - Freelance, Investasi
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                            <h2 class="text-17 fw-500">Riwayat Pelayanan Kesehatan</h2>
                        </div>
                        <div class="py-30 px-30">
                            <div class="y-gap-20">
                                <!-- Kunjungan Terakhir -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Kunjungan Terakhir
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        15 Jan 2023
                                    </div>
                                </div>

                                <!-- Detail Kunjungan -->
                                <div class="d-flex justify-between items-center py-5 pl-20">
                                    <div class="text-14 text-dark-1">
                                        - Pemeriksaan Rutin
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        RS Umum Daerah
                                    </div>
                                </div>

                                <div class="border-top-light my-10"></div>

                                <!-- Riwayat Rawat Inap -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Riwayat Rawat Inap
                                    </div>
                                </div>

                                <!-- Daftar Rawat Inap -->
                                <div class="d-flex justify-between items-center py-5 pl-20">
                                    <div class="text-14 text-dark-1">
                                        - Operasi Usus Buntu
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Mei 2021
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <!-- Header -->
                        <div class="d-flex justify-between items-center py-15 px-20 border-bottom-light bg-light-2">
                            <h2 class="text-14 fw-500">DATA NJOP TERPADU</h2>
                            <span class="text-12">TAHUN: 2023</span>
                        </div>

                        <!-- Body -->
                        <div class="py-20 px-20">
                            <!-- Info Dasar -->
                            <div class="mb-15">
                                <div class="text-12 text-dark-1 mb-5">NOP: 12.34.567.89.123.789</div>
                                <div class="text-12 text-dark-1">Jl. Merdeka No. 123, Kel. Bahagia</div>
                            </div>

                            <!-- Nilai NJOP -->
                            <div class="border-top-light pt-10">
                                <!-- Tanah -->
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>NJOP Tanah:</span>
                                    <span class="fw-500">Rp1,25M</span>
                                </div>

                                <!-- Bangunan -->
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>NJOP Bangunan:</span>
                                    <span class="fw-500">Rp875jt</span>
                                </div>

                                <!-- Lahan -->
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>NJOP Lahan Kosong:</span>
                                    <span class="fw-500">Rp350jt</span>
                                </div>

                                <!-- Sarana -->
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>NJOP Sarana:</span>
                                    <span class="fw-500">Rp125jt</span>
                                </div>

                                <!-- Total -->
                                <div class="d-flex justify-between text-12 fw-500 mt-5 pt-5 border-top-light">
                                    <span>TOTAL NJOP:</span>
                                    <span class="text-dark-1">Rp2,6M</span>
                                </div>
                            </div>

                            <!-- Info Tambahan -->
                            <div class="border-top-light pt-10 mt-10">
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Luas Tanah:</span>
                                    <span>250m²</span>
                                </div>
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Luas Bangunan:</span>
                                    <span>120m²</span>
                                </div>
                                <div class="d-flex justify-between text-12">
                                    <span>Luas Lahan:</span>
                                    <span>180m²</span>
                                </div>
                            </div>

                            <!-- Zona Nilai -->
                            <div class="border-top-light pt-10 mt-10">
                                <div class="text-12 mb-5">Zona Nilai: <span class="fw-500">C-12</span></div>
                                <div class="text-12">Klasifikasi: <span class="fw-500">Pemukiman</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <!-- Header -->
                        <div class="d-flex justify-between items-center py-15 px-20 border-bottom-light">
                            <h2 class="text-14 fw-500">KONDISI RUMAH</h2>
                            <span class="text-12">ID: RMH/2023/001</span>
                        </div>

                        <!-- Body -->
                        <div class="py-20 px-20">
                            <!-- Identitas -->
                            <div class="mb-15">
                                <div class="text-12 text-dark-1 mb-5">Pemilik: <span class="fw-500">Budi Santoso</span></div>
                                <div class="text-12 text-dark-1">Alamat: <span class="fw-500">Jl. Melati No. 10, Kel. Sejahtera</span></div>
                            </div>

                            <!-- Kriteria Rumah -->
                            <div class="border-top-light pt-10">
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Status Bangunan:</span>
                                    <span class="fw-500">Milik Sendiri</span>
                                </div>
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Jenis Konstruksi:</span>
                                    <span class="fw-500">Tembok Permanen</span>
                                </div>
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Kondisi Atap:</span>
                                    <span class="fw-500">Genteng (Baik)</span>
                                </div>
                                <div class="d-flex justify-between text-12">
                                    <span>Lantai:</span>
                                    <span class="fw-500">Keramik</span>
                                </div>
                            </div>

                            <!-- Data Pendukung -->
                            <div class="border-top-light pt-10 mt-10">
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Luas Bangunan:</span>
                                    <span>72m²</span>
                                </div>
                                <div class="d-flex justify-between text-12 mb-5">
                                    <span>Jumlah Kamar:</span>
                                    <span>3</span>
                                </div>
                                <div class="d-flex justify-between text-12">
                                    <span>Fasilitas:</span>
                                    <span>Listrik, Air PDAM</span>
                                </div>
                            </div>

                            <!-- Catatan -->
                            <div class="border-top-light pt-10 mt-10">
                                <div class="text-12 text-dark-1">
                                    <span class="fw-500">Catatan:</span> Bangunan layak huni, terawat baik
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                            <h2 class="text-17 fw-500">Riwayat Kesehatan</h2>
                        </div>
                        <div class="py-30 px-30">
                            <div class="y-gap-20">
                                <!-- Riwayat Penyakit -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Riwayat Penyakit
                                    </div>
                                </div>

                                <!-- Daftar Penyakit -->
                                <div class="d-flex justify-between items-center py-5 pl-20">
                                    <div class="text-14 text-dark-1">
                                        - Hipertensi
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Terdiagnosis: 2020
                                    </div>
                                </div>
                                <div class="d-flex justify-between items-center py-5 pl-20">
                                    <div class="text-14 text-dark-1">
                                        - Diabetes Tipe 2
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Terdiagnosis: 2022
                                    </div>
                                </div>

                                <div class="border-top-light my-10"></div>

                                <!-- Alergi -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Alergi
                                    </div>
                                </div>

                                <!-- Daftar Alergi -->
                                <div class="d-flex justify-between items-center py-5 pl-20">
                                    <div class="text-14 text-dark-1">
                                        - Alergi Udang
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Tingkat: Sedang
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-item col-xl-4 col-md-6 col-12">
                    <div class="rounded-16 bg-white -dark-bg-dark-1 shadow-4 h-100 m-2">
                        <div class="d-flex justify-between items-center py-20 px-30 border-bottom-light">
                            <h2 class="text-17 fw-500">MODA TRANSPORTASI HARIAN</h2>
                        </div>
                        <div class="py-30 px-30">
                            <div class="y-gap-20">
                                <!-- Moda Transportasi Utama -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Moda Utama
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Sepeda Motor Pribadi
                                    </div>
                                </div>

                                <!-- Frekuensi -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Frekuensi
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        10x/minggu
                                    </div>
                                </div>

                                <!-- Tujuan -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Tujuan
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Kantor/Pusat Kota
                                    </div>
                                </div>

                                <!-- Jarak -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Jarak
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        15 km (PP)
                                    </div>
                                </div>

                                <!-- Waktu -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Waktu
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        45 menit
                                    </div>
                                </div>

                                <!-- Biaya -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Biaya
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Rp 25.000/hari
                                    </div>
                                </div>

                                <div class="border-top-light my-10"></div>

                                <!-- Moda Alternatif -->
                                <div class="d-flex justify-between items-center py-10">
                                    <div class="text-15 fw-500">
                                        • Moda Alternatif
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        Transportasi Online
                                    </div>
                                </div>

                                <!-- Frekuensi Alternatif -->
                                <div class="d-flex justify-between items-center py-5">
                                    <div class="text-14 text-dark-1 pl-20">
                                        - Frekuensi
                                    </div>
                                    <div class="text-14 text-dark-1">
                                        2x/minggu
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.fullscreen@2.4.0/dist/Leaflet.fullscreen.min.css" />
    <style>
        .family-node {
            min-width: 80px;
            border: 1px solid #e0e0e0;
        }

        .family-connector {
            width: 2px;
            height: 20px;
            background-color: #ccc;
            margin: 0 auto;
        }

        .card-main {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }

        .card-main:hover {
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.20);
        }

        @media only screen and (max-width: 767px) {
            .social-media-container {
                margin-top: 16px;
                margin-left: 0 !important;
            }
        }

        .sosmed:hover {
            text: black !important;
        }

        #map-domisili {
            min-height: 300px;
            z-index: 1;
        }

        .leaflet-control-fullscreen {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        }
        .leaflet-control-fullscreen a {
            width: 30px;
            height: 30px;
            line-height: 30px;
            display: block;
            text-align: center;
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        .leaflet-control-fullscreen a:hover {
            background-color: #f4f4f4;
        }
    </style>
@endsection

@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endsection

@section('javascript')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.fullscreen@2.4.0/dist/Leaflet.fullscreen.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            @if($penduduk->lokasi_id)
                console.log('🚀 Memulai inisialisasi peta untuk lokasi_id:', {{ $penduduk->lokasi_id }});

                // 1. Setup default coordinates (Tomohon coordinates from your data)
                let coords = {
                    lat: 1.3552730900619632,
                    lng: 124.83262657548147,
                    zoom: 15,
                    popup: "Lokasi Domisili"
                };

                // 2. If peta data exists
                @if($penduduk->peta)
                    console.log('📡 Data peta ditemukan');

                    // Option 1: Use direct coordinates if available
                    @if(isset($penduduk->peta->latitude) && isset($penduduk->peta->longitude))
                        coords.lat = {{ $penduduk->peta->latitude }};
                        coords.lng = {{ $penduduk->peta->longitude }};
                        console.log('📍 Menggunakan koordinat langsung:', coords.lat, coords.lng);

                    // Option 2: Use coordinates from backend-converted geometry
                    @elseif(isset($penduduk->peta->coordinates))
                        coords.lat = {{ $penduduk->peta->coordinates['lat'] }};
                        coords.lng = {{ $penduduk->peta->coordinates['lng'] }};
                        console.log('🔄 Menggunakan koordinat dari backend:', coords.lat, coords.lng);
                    @endif

                    // Set zoom and popup from peta data
                    coords.zoom = {{ $penduduk->peta->zoom_level ?? 15 }};
                    coords.popup = `<b>{{ $penduduk->peta->nama ?? 'Lokasi Domisili' }}</b><br>
                                  {{ $penduduk->peta->keterangan_lokasi ?? '' }}`;
                @endif

                // Inisialisasi peta
                const map = L.map('map-domisili').setView([coords.lat, coords.lng], coords.zoom);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; OpenStreetMap contributors'
                }).addTo(map);

                // Tambahkan marker
                const marker = L.marker([coords.lat, coords.lng])
                    .addTo(map)
                    .bindPopup(coords.popup)
                    .openPopup();

                // Custom Fullscreen Control
                L.Control.Fullscreen = L.Control.extend({
                    options: {
                        position: 'topright',
                        title: {
                            enter: 'Fullscreen mode',
                            exit: 'Exit fullscreen mode'
                        }
                    },

                    onAdd: function(map) {
                        const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-fullscreen');

                        this._button = L.DomUtil.create('a', '', container);
                        this._button.href = '#';
                        this._button.title = this.options.title.enter;
                        this._button.innerHTML = '⛶';
                        this._button.style.fontSize = '1.5em';
                        this._button.style.lineHeight = '28px';

                        L.DomEvent
                            .on(this._button, 'click', L.DomEvent.stopPropagation)
                            .on(this._button, 'click', L.DomEvent.preventDefault)
                            .on(this._button, 'click', this._toggleFullscreen, this);

                        // Handle perubahan state fullscreen
                        document.addEventListener('fullscreenchange', this._updateTitle, this);
                        document.addEventListener('webkitfullscreenchange', this._updateTitle, this);
                        document.addEventListener('msfullscreenchange', this._updateTitle, this);

                        return container;
                    },

                    onRemove: function() {
                        document.removeEventListener('fullscreenchange', this._updateTitle);
                        document.removeEventListener('webkitfullscreenchange', this._updateTitle);
                        document.removeEventListener('msfullscreenchange', this._updateTitle);
                    },

                    _toggleFullscreen: function() {
                        const mapContainer = map.getContainer();

                        if (!document.fullscreenElement &&
                            !document.webkitFullscreenElement &&
                            !document.msFullscreenElement) {
                            // Masuk ke fullscreen
                            if (mapContainer.requestFullscreen) {
                                mapContainer.requestFullscreen();
                            } else if (mapContainer.webkitRequestFullscreen) {
                                mapContainer.webkitRequestFullscreen();
                            } else if (mapContainer.msRequestFullscreen) {
                                mapContainer.msRequestFullscreen();
                            }
                        } else {
                            // Keluar dari fullscreen
                            if (document.exitFullscreen) {
                                document.exitFullscreen();
                            } else if (document.webkitExitFullscreen) {
                                document.webkitExitFullscreen();
                            } else if (document.msExitFullscreen) {
                                document.msExitFullscreen();
                            }
                        }
                    },

                    _updateTitle: function() {
                        // Pastikan this._button dan this.options ada
                        if (!this._button || !this.options) return;

                        const isFullscreen = document.fullscreenElement ||
                                           document.webkitFullscreenElement ||
                                           document.msFullscreenElement;

                        this._button.title = isFullscreen ?
                            this.options.title.exit :
                            this.options.title.enter;

                        this._button.innerHTML = isFullscreen ? '⛌' : '⛶';
                        setTimeout(() => this._map.invalidateSize(), 100);
                    },
                });

                // Factory function untuk custom control
                L.control.fullscreen = function(options) {
                    return new L.Control.Fullscreen(options);
                };

                // Tambahkan control ke peta
                L.control.fullscreen({
                    position: 'topright',
                    title: {
                        enter: 'Maximize Peta',
                        exit: 'Minimize Peta'
                    }
                }).addTo(map);

                // Handle zoom saat fullscreen berubah
                document.addEventListener('fullscreenchange', () => {
                    if (document.fullscreenElement) {
                        map.setZoom(coords.zoom + 2);
                    } else {
                        map.setZoom(coords.zoom);
                    }
                });

            @endif
        });
    </script>

    {{-- mansory --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            var msnry = new Masonry(document.querySelector('.grid'), {
                itemSelector: '.grid-item',
                columnWidth: '.grid-sizer'
            });
        });
    </script>
@endsection