@{
    ViewData["Title"] = "Bio Bank Sampah";
    Layout = "~/Views/Shared/_LayoutAppWithoutNavbar.cshtml";
}

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

<div class="min-h-screen flex items-center justify-center py-8 px-4">
    <div class="w-full max-w-4xl">

        <!-- Title -->
        <div class="flex flex-col items-center mb-6">
            <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
                Lengkapi Data Kelengkapan Bank Sampah
            </span>
        </div>

        <!-- Alert -->
        <div class="border border-blue-200 bg-blue-50 rounded-lg mb-6 p-4 flex flex-col gap-2 justify-start justify-items-start">
            <h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
            <p class="text-sm text-blue-600">
                Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah.
                Form ini hanya tampil sekali.
            </p>
        </div>

        <!-- FORM -->
        <form class="space-y-6">

            <!-- ===================== SECTION 1 ===================== -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-medium text-gray-700 mb-4">Data Kelengkapan Bank Sampah</h3>
                <div class="divider"></div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nama Bank Sampah <span class="text-red-500">*</span></label>
                        <input id="namaBank" type="text" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
                        <input id="email" type="email" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Kategori Bank Sampah <span class="text-red-500">*</span></label>
                        <select id="kategori" required class="select select-bordered w-full">
                            <option disabled selected>Pilih kategori</option>
                            <option>Induk</option>
                            <option>Unit</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Penanggung Jawab <span class="text-red-500">*</span></label>
                        <input id="penanggungJawab" type="text" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">No HP Penanggung Jawab <span class="text-red-500">*</span></label>
                        <input id="noHp" type="text" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Badan Hukum <span class="text-red-500">*</span></label>
                        <select id="badanHukum" required class="select select-bordered w-full">
                            <option disabled selected>Pilih status</option>
                            <option>Ya</option>
                            <option>Tidak</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tahun Berdiri <span class="text-red-500">*</span></label>
                        <input id="tahunBerdiri" type="number" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Luas Lahan (m²) <span class="text-red-500">*</span></label>
                        <input id="luasLahan" type="number" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status Lahan <span class="text-red-500">*</span></label>
                        <select id="statusLahan" required class="select select-bordered w-full">
                            <option disabled selected>Pilih status lahan</option>
                            <option>Milik Sendiri</option>
                            <option>Sewa</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Jumlah Pengurus <span class="text-red-500">*</span></label>
                        <input id="jumlahPengurus" type="number" required class="input input-bordered w-full" />
                    </div>

                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Memiliki SOP? <span class="text-red-500">*</span></label>
                        <select id="sop" required class="select select-bordered w-full">
                            <option disabled selected>Pilih</option>
                            <option>Ya</option>
                            <option>Tidak</option>
                        </select>
                    </div>

                </div>
            </div>

            <!-- ===================== SECTION 2 ===================== -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-medium text-gray-700 mb-4">Lokasi Bank Sampah</h3>
                <div class="divider"></div>

                <label class="block text-sm font-medium text-gray-700 mb-2">Alamat <span class="text-red-500">*</span></label>
                <textarea id="alamat" rows="4" required class="textarea textarea-bordered w-full"></textarea>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">RT <span class="text-red-500">*</span></label>
                        <input id="rt" type="text" required class="input input-bordered w-full" />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">RW <span class="text-red-500">*</span></label>
                        <input id="rw" type="text" required class="input input-bordered w-full" />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Kode Pos <span class="text-red-500">*</span></label>
                        <input id="kodePos" type="text" required class="input input-bordered w-full" />
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Provinsi <span class="text-red-500">*</span></label>
                        <select id="provinsi" required class="select select-bordered w-full">
                            <option>Pilih Provinsi</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Kota <span class="text-red-500">*</span></label>
                        <select id="kota" required class="select select-bordered w-full">
                            <option>Pilih Kota</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Kecamatan <span class="text-red-500">*</span></label>
                        <select id="kecamatan" required class="select select-bordered w-full">
                            <option>Pilih Kecamatan</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Kelurahan <span class="text-red-500">*</span></label>
                        <select id="kelurahan" required class="select select-bordered w-full">
                            <option>Pilih Kelurahan</option>
                        </select>
                    </div>
                </div>

            </div>

            <!-- ===================== SECTION 3 ===================== -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-medium text-gray-700 mb-4">Titik Lokasi</h3>
                <div class="divider"></div>

                <div id="map" class="mb-6"></div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Latitude <span class="text-red-500">*</span></label>
                        <input id="lat" class="input input-bordered w-full" readonly>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Longitude <span class="text-red-500">*</span></label>
                        <input id="lng" class="input input-bordered w-full" readonly>
                    </div>
                </div>

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

                <div class="flex justify-end">
                    <button type="submit" class="btn bg-green-800 hover:bg-green-900 text-white px-8 py-2 rounded-full">
                        Simpan dan Lanjutkan
                    </button>
                </div>
            </div>


        </form>
    </div>
</div>

@section Scripts {
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
$(document).ready(function () {

    const defaultLat = -7.2575;
    const defaultLng = 112.7521;

    const map = L.map('map').setView([defaultLat, defaultLng], 15);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    const marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);

    $("#lat").val(defaultLat);
    $("#lng").val(defaultLng);

    marker.on("dragend", function () {
        const pos = marker.getLatLng();
        $("#lat").val(pos.lat.toFixed(6));
        $("#lng").val(pos.lng.toFixed(6));
    });

    map.on("click", function (e) {
        marker.setLatLng(e.latlng);
        $("#lat").val(e.latlng.lat.toFixed(6));
        $("#lng").val(e.latlng.lng.toFixed(6));
    });

});
</script>
}