@{
    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" />
}

<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>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        const form = document.getElementById("formUlasan");
        const pekerjaan = document.getElementById("pekerjaan");
        const pekerjaanLainnya = document.getElementById("pekerjaanLainnya");
        const successMsg = document.getElementById("successMsg");

        pekerjaan.addEventListener("change", function () {
            if (this.value === "lainnya") {
                pekerjaanLainnya.classList.remove("d-none");
            } else {
                pekerjaanLainnya.classList.add("d-none");
                pekerjaanLainnya.value = "";
            }
        });

        document.querySelectorAll("input, select, textarea").forEach(el => {
            el.addEventListener("input", function () {
                const container = this.closest(".mb-3, .mb-4");
                const errorMsg = container?.querySelector(".error-msg");

                this.classList.remove("is-invalid");
                if (errorMsg) errorMsg.classList.add("d-none");
            });
        });

        document.querySelectorAll("input[type=radio]").forEach(input => {
            input.addEventListener("change", function () {
                const card = this.closest(".question-card");
                const errorMsg = card.querySelector(".error-msg");

                card.classList.remove("border", "border-danger");
                errorMsg.classList.add("d-none");
            });
        });

        form.addEventListener("submit", function (e) {
            e.preventDefault();

            let isValid = true;
            const penilaian = {};

            ["gender", "usia", "pendidikan", "pekerjaan", "saran", "ulasan"].forEach(id => {
                const el = document.getElementById(id);
                const container = el.closest(".mb-3, .mb-4");
                const errorMsg = container.querySelector(".error-msg");

                if (!el.value.trim()) {
                    isValid = false;
                    el.classList.add("is-invalid");
                    errorMsg.classList.remove("d-none");
                }
            });

            if (pekerjaan.value === "lainnya" && !pekerjaanLainnya.value.trim()) {
                isValid = false;
                pekerjaanLainnya.classList.add("is-invalid");
            }

            document.querySelectorAll(".question-card").forEach(card => {
                const checked = card.querySelector("input:checked");
                const errorMsg = card.querySelector(".error-msg");

                if (!checked) {
                    isValid = false;
                    card.classList.add("border", "border-danger");
                    errorMsg.classList.remove("d-none");
                } else {
                    const input = card.querySelector("input:checked");
                    penilaian[input.name] = Number(input.value);
                }
            });

            if (!isValid) return;

            const data = {
                gender: document.getElementById("gender").value,
                usia: Number(document.getElementById("usia").value),
                pendidikan: document.getElementById("pendidikan").value,
                pekerjaan: pekerjaan.value === "lainnya"
                    ? pekerjaanLainnya.value
                    : pekerjaan.value,
                saran: document.getElementById("saran").value,
                ulasan: document.getElementById("ulasan").value,
                penilaian: penilaian
            };

            console.log("DATA FINAL:", data);

            form.reset();
            pekerjaanLainnya.classList.add("d-none");

            successMsg.classList.remove("d-none");

            setTimeout(() => {
                successMsg.classList.add("d-none");
            }, 3000);
        });

    });
</script>