bank-sampah/Views/Main/Profil/Index.cshtml

@{
    ViewData["Title"] = "Profil Bank Sampah";
}

@section Styles {
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map-display {
            height: 400px;
            width: 100%;
            border-radius: 0.5rem;
        }
    </style>
}

<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
    <div class="prose">
        <span class="text-xl font-semibold text-black">
            Profil Bank Sampah
        </span>
    </div>
</div>

<div class="h-6"></div>

<div class="flex flex-col items-center justify-between gap-4 rounded bg-white p-6 md:flex-row">
    <div class="flex w-full flex-col items-center gap-4 md:flex-row">
        <figure>
            <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
                 alt="Shoes"
                 width="80"
                 height="80"
                 class="h-20 w-20 rounded bg-contain bg-center object-cover" />
        </figure>
        <div class="flex flex-col items-center md:items-start">
            <h2 class="font-semibold">Jakarta Timur</h2>
            <p>Bank Sampah Induk</p>
        </div>
    </div>
    <div class="badge badge-soft badge-success">
        Status Aktif
    </div>
</div>

<div class="h-6"></div>

<div class="card bg-white">
    <div class="card-body">
        <div class="flex flex-row items-center justify-between">
            <h2 class="card-title">
                Informasi Biodata
            </h2>
            <a href="@Url.Action("Edit","Profil", 1)" class="btn btn-sm rounded-full bg-white">
                <i class="ph ph-note-pencil me-2"></i>
                Edit Biodata
            </a>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Nama Bank Sampah</span>
                <span class="text-sm">Jakarta Timur</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kategori Bank Sampah</span>
                <span class="text-sm">Warga</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Email</span>
                <span class="text-sm">banksampahjaktim@gmail.com</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">SK Penetapan</span>
                <span class="text-sm">127.12.1222.1111</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Penangung Jawab</span>
                <span class="text-sm">Ikhdan Maulana</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">No. HP Penanggung Jawab</span>
                <span class="text-sm">089556728383</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Jumlah Pengurus</span>
                <span class="text-sm">67</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Badan Hukum</span>
                <span class="text-sm">PT</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Luas Lahan m<sup>2</sup></span>
                <span class="text-sm">6128</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Status Lahan</span>
                <span class="text-sm">Pribadi</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Tahun Berdiri</span>
                <span class="text-sm">2021</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">SK Penetapan PT</span>
                <span class="text-sm">12.340-327832.38.12</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Provinsi</span>
                <span class="text-sm">DKI Jakarta</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kota</span>
                <span class="text-sm">Kota Adm Jakarta Timur</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kecamatan</span>
                <span class="text-sm">Pasarejo</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kelurahan</span>
                <span class="text-sm">Pasar Minggu</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Alamat</span>
                <span class="text-sm">Jalan Raya Pasar Minggu No. 45 Jakarta Timur, DKI Jakarta</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">RT</span>
                <span class="text-sm">02</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">RW</span>
                <span class="text-sm">02</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kode Pos</span>
                <span class="text-sm">61374</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Latitude</span>
                <span class="text-sm" id="latitude-value">-6.2088</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Longitude</span>
                <span class="text-sm" id="longitude-value">106.8456</span>
            </div>
        </div>

        <div class="divider"></div>

        <!-- Map Display -->
        <div>
            <h3 class="text-sm font-semibold text-gray-700 mb-3">
                <i class="ph ph-map-pin me-2"></i>
                Lokasi di Peta
            </h3>
            <div id="map-display" class="rounded-lg border border-gray-300"></div>
            <p class="text-xs text-gray-500 mt-2">
                <i class="ph ph-info me-1"></i>
                Peta menampilkan lokasi Bank Sampah
            </p>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Get coordinates from data
        const lat = parseFloat(document.getElementById('latitude-value').textContent);
        const lng = parseFloat(document.getElementById('longitude-value').textContent);

        // Initialize map
        const mapDisplay = L.map('map-display').setView([lat, lng], 15);

        // Add tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            maxZoom: 18,
            minZoom: 4
        }).addTo(mapDisplay);

        // Add marker (non-draggable for view mode)
        const marker = L.marker([lat, lng]).addTo(mapDisplay);
        marker.bindPopup(`
            <div style="text-align: center;">
                <strong>Lokasi Bank Sampah</strong><br>
                <small>${lat.toFixed(8)}, ${lng.toFixed(8)}</small>
            </div>
        `).openPopup();
    </script>
}