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

<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="alert border-blue-200 bg-blue-50 rounded-lg mb-6">
            <div>
                <h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
                <div class="text-sm text-blue-600">
                    Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah. Form ini hanya tampil sekali.
                </div>
            </div>
        </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="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <!-- Nama Bank -->
                    <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 type="text" placeholder="Nama Bank Sampah"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- Email -->
                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            E-mail <span class="text-red-500">*</span>
                        </label>
                        <input type="email" placeholder="email@example.com"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- Kategori -->
                    <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 class="select select-bordered w-full">
                            <option disabled selected>Pilih kategori</option>
                            <option>Induk</option>
                            <option>Unit</option>
                        </select>
                    </div>

                    <!-- Penanggung Jawab -->
                    <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 type="text" placeholder="Nama Penanggung Jawab"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- No HP -->
                    <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 type="text" placeholder="628xxxxxxxxx"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- Badan Hukum -->
                    <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 class="select select-bordered w-full">
                            <option disabled selected>Pilih status</option>
                            <option>Ya</option>
                            <option>Tidak</option>
                        </select>
                    </div>

                    <!-- Tahun Berdiri -->
                    <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 type="number" placeholder="2020"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- Luas Lahan -->
                    <div class="form-control">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Luas Lahan <span class="text-red-500">*</span>
                        </label>
                        <input type="number" placeholder="Contoh: 100"
                               class="input input-bordered w-full" />
                    </div>

                    <!-- Status Lahan -->
                    <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 class="select select-bordered w-full">
                            <option disabled selected>Pilih status lahan</option>
                            <option>Milik Sendiri</option>
                            <option>Sewa</option>
                        </select>
                    </div>

                    <!-- Jumlah Pengurus -->
                    <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 type="number" placeholder="Contoh: 5" class="input input-bordered w-full" />
                    </div>

                    <!-- SOP -->
                    <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 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">Informasi Biodata</h3>

                <!-- Alamat -->
                <div class="form-control">
                    <label class="label"><span class="label-text font-semibold">Alamat *</span></label>
                    <textarea class="textarea textarea-bordered h-28" placeholder="Masukkan alamat lengkap"></textarea>
                </div>

                <!-- RT RW Kode Pos -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">RT *</span></label>
                        <input type="text" class="input input-bordered" placeholder="RT" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">RW *</span></label>
                        <input type="text" class="input input-bordered" placeholder="RW" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">Kode Pos *</span></label>
                        <input type="text" class="input input-bordered" placeholder="Kode Pos" />
                    </div>
                </div>

                <!-- Provinsi / Kota -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">Provinsi *</span></label>
                        <select class="select select-bordered">
                            <option disabled selected>Pilih Provinsi</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">Kota *</span></label>
                        <select class="select select-bordered">
                            <option disabled selected>Pilih Kota</option>
                        </select>
                    </div>
                </div>

                <!-- Kecamatan / Kelurahan -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">Kecamatan *</span></label>
                        <select class="select select-bordered">
                            <option disabled selected>Pilih Kecamatan</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text font-semibold">Kelurahan *</span></label>
                        <select class="select select-bordered">
                            <option disabled selected>Pilih Kelurahan</option>
                        </select>
                    </div>
                </div>

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

                <!-- Submit -->
                <div class="flex justify-end">
                    <button class="btn btn-success btn-wide">
                        Simpan dan Lanjutkan
                    </button>
                </div>
            </div>

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