@{
    Layout = "~/Views/WebNew/Shared/_Layout.cshtml";
    ViewData["Title"] = "Ulasan Pelanggan";

    var questions = new[]{
        new { key = "persyaratan", label = "Bagaimana pendapat Saudara tentang kesesuaian persyaratan pelayanan dengan jenis pelayanannya?" },
        new { key = "prosedur", label = "Bagaimana pemahaman Saudara tentang kemudahan prosedur pelayanan di Laboratorium Lingkungan Hidup Daerah DKI Jakarta?" },
        new { key = "kerahasiaan", label = "Bagaimana pendapat Saudara mengenai jaminan kerahasiaan contoh uji (sampel) di LLHD?" },
        new { key = "kecepatan", label = "Bagaimana pendapat Saudara tentang kecepatan pelayanan di LLHD?" },
        new { key = "ketepatan_waktu", label = "Bagaimana pendapat Saudara tentang ketepatan waktu penyelesaian pengujian laboratorium terhadap jadwal waktu pelayanan yang telah ditetapkan?" },
        new { key = "biaya", label = "Bagaimana pendapat Saudara tentang kesesuaian biaya/tarif dalam pelayanan?" },
        new { key = "produk", label = "Bagaimana pendapat Saudara tentang kesesuaian produk pelayanan antara yang tercantum dalam standar pelayanan dengan hasil yang diberikan?" },
        new { key = "kompetensi", label = "Bagaimana pendapat Saudara tentang kompetensi/kemampuan petugas dalam pelayanan?" },
        new { key = "komunikasi", label = "Bagaimana pendapat Saudara mengenai kemampuan komunikasi petugas dalam memberikan informasi ke pelanggan?" },
        new { key = "sikap", label = "Bagaimana pendapat Saudara perilaku petugas dalam pelayanan terkait kesopanan dan keramahan?" },
        new { key = "penanganan_keluhan", label = "Bagaimana pendapat Saudara tentang respon/bantuan petugas dalam menangani keluhan/pengaduan?" },
        new { key = "fasilitas", label = "Bagaimana pendapat Saudara tentang kenyamanan fasilitas pelayanan di LLHD?" }
    };
}

@section Style {
    <link rel="stylesheet" href="~/webnew/css/formreview.css" asp-append-version="true" />
}

@section Scripts {
    <script src="~/webnew/pages/form-review.js"></script>
}


@await Html.PartialAsync("~/Views/WebNew/Shared/Section/_Helpdesk.cshtml")


<div class="container py-5">
    <div class="card form-card mx-auto border-0 shadow-sm">
        <div class="card-body p-md-5 p-4">

            <h3 class="fw-bold mb-1">Survei Kepuasan Pelanggan</h3>
            <p class="text-muted mb-4">Mohon isi form berikut untuk meningkatkan kualitas pelayanan kami</p>

            <form id="formUlasan" novalidate>

                <div class="mb-3">
                    <label class="form-label">Jenis Kelamin<span class="text-danger">*</span></label>
                    <select class="form-select" id="gender">
                        <option value="">Pilih</option>
                        <option>Laki-laki</option>
                        <option>Perempuan</option>
                    </select>
                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Usia<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="usia" />
                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Pendidikan<span class="text-danger">*</span></label>
                    <select class="form-select" id="pendidikan">
                        <option value="">Pilih</option>
                        <option>SLTA ke bawah</option>
                        <option>SLTA</option>
                        <option>D1/D2/D3</option>
                        <option>S1</option>
                        <option>S2/S3/Profesi</option>
                    </select>
                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <div class="mb-4">
                    <label class="form-label">Pekerjaan<span class="text-danger">*</span></label>

                    <select class="form-select" id="pekerjaan">
                        <option value="">Pilih</option>
                        <option>PNS/TNI/POLRI</option>
                        <option>Pegawai Swasta</option>
                        <option>Wiraswasta</option>
                        <option>Pelajar/Mahasiswa</option>
                        <option value="lainnya">Lainnya</option>
                    </select>

                    <input type="text" class="form-control d-none mt-2" id="pekerjaanLainnya"
                           placeholder="Isi pekerjaan lainnya..." />

                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <hr class="my-4" />

                @for (int i = 0; i < questions.Length; i++)
                {
                <div class="question-card mb-4 p-3">

                    <label class="form-label fw-semibold mb-3">
                        @(i + 1). @questions[i].label
                        <span class="text-danger">*</span>
                    </label>

                    <div class="survey-scale">
                        <span class="scale-label">Tidak Sesuai</span>

                        <div class="scale-options">
                            @for (int j = 1; j <= 4; j++)
                                {
                            <label class="scale-item">
                                <span class="number">@j</span>
                                <input type="radio" name="@questions[i].key" value="@j" />
                                <span class="circle"></span>
                            </label>
                                }
                        </div>

                        <span class="scale-label text-end">Sangat Sesuai</span>
                    </div>

                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>
                }

                <div class="mb-3">
                    <label class="form-label">Saran dan Masukan<span class="text-danger">*</span></label>
                    <textarea class="form-control" id="saran"></textarea>
                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <div class="mb-4">
                    <label class="form-label">Ulasan<span class="text-danger">*</span></label>
                    <textarea class="form-control" id="ulasan"></textarea>
                    <small class="text-danger d-none error-msg">Wajib diisi</small>
                </div>

                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
                    Kirim
                </button>

            </form>

            <div id="successMsg" class="alert alert-success d-none mt-4">
                Ulasan berhasil dikirim. Terima kasih atas partisipasi Anda!
            </div>

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