@extends('public.layouts.public')

@section('title', 'Kuesioner Tracer Study - ' . $wisudawan->nama_lengkap)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">

    {{-- Flash Notifications --}}
    @if (session('profile_success'))
        <div class="p-4 rounded-2xl bg-emerald-950/80 border border-emerald-500/40 text-emerald-300 flex items-center justify-between shadow-lg">
            <div class="flex items-center gap-3">
                <i class="fas fa-check-circle text-emerald-400 text-xl"></i>
                <span class="text-sm font-semibold">{{ session('profile_success') }}</span>
            </div>
            <button type="button" onclick="this.parentElement.remove()" class="text-emerald-400 hover:text-emerald-200 text-sm">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    @if ($errors->any())
        <div class="p-4 rounded-2xl bg-rose-950/80 border border-rose-500/40 text-rose-300 space-y-1 shadow-lg">
            <div class="flex items-center gap-2 font-bold text-sm">
                <i class="fas fa-exclamation-triangle text-rose-400"></i> Terjadi Kesalahan:
            </div>
            <ul class="list-disc list-inside text-xs space-y-0.5 text-rose-200">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- SECTION 1: IDENTITAS & BIODATA ALUMNI (ALUMNI TERVERIFIKASI) -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6 shadow-xl relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600/10 rounded-full blur-3xl -z-0 pointer-events-none"></div>

        {{-- Header Section 1 --}}
        <div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-5 relative z-10">
            <div class="space-y-1">
                <div class="flex items-center gap-2">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
                        <i class="fas fa-check-circle text-emerald-400"></i> Alumni Terverifikasi
                    </span>
                    <span class="px-2.5 py-0.5 rounded-full text-[11px] font-mono font-semibold bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
                        No. {{ $wisudawan->no_alumni }}
                    </span>
                </div>
                <h2 class="text-2xl font-extrabold text-white">{{ $wisudawan->nama_lengkap }}</h2>
                <p class="text-xs text-slate-400 flex items-center gap-2">
                    <span><i class="fas fa-university text-indigo-400 me-1"></i> {{ $wisudawan->prodi->fakultas->nama_fakultas ?? '-' }}</span>
                    <span>•</span>
                    <span class="text-slate-300 font-semibold">{{ $wisudawan->prodi->nama_prodi ?? '-' }} ({{ $wisudawan->prodi->jenjang ?? 'S1' }})</span>
                </p>
            </div>

            {{-- Action Button: Edit / Update Biodata --}}
            <div>
                <button type="button" onclick="openProfileModal()" class="px-4 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-xs shadow-lg shadow-amber-500/20 transition-all flex items-center gap-2">
                    <i class="fas fa-user-edit"></i> Edit / Update Biodata
                </button>
            </div>
        </div>

        {{-- Biodata Details Grid (Sesuai Bagian 1. Identitas & Biodata Alumni) --}}
        <div class="relative z-10 space-y-4">
            <h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider flex items-center gap-2">
                <i class="fas fa-id-card text-indigo-400"></i> 1. Identitas & Biodata Alumni
            </h4>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3.5">
                {{-- No. Alumni --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">No. Alumni</span>
                    <span class="font-mono text-sm font-bold text-indigo-400">{{ $wisudawan->no_alumni }}</span>
                </div>

                {{-- NIM --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">NIM (Nomor Induk Mahasiswa)</span>
                    <span class="font-mono text-sm font-bold text-white">{{ $wisudawan->nim }}</span>
                </div>

                {{-- Nama Lengkap --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">Nama Lengkap</span>
                    <span class="text-sm font-bold text-white">{{ $wisudawan->nama_lengkap }}</span>
                </div>

                {{-- NIK (No. KTP) --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">NIK (No. KTP)</span>
                    <span class="font-mono text-sm font-semibold {{ $wisudawan->nik ? 'text-white' : 'text-slate-500 italic' }}">
                        {{ $wisudawan->nik ?? 'Belum diisi' }}
                    </span>
                </div>

                {{-- Jenis Kelamin --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">Jenis Kelamin</span>
                    <span class="text-sm font-semibold text-white">
                        @if ($wisudawan->jenis_kelamin == 'L')
                            <i class="fas fa-mars text-sky-400 me-1"></i> Laki-laki
                        @elseif ($wisudawan->jenis_kelamin == 'P')
                            <i class="fas fa-venus text-pink-400 me-1"></i> Perempuan
                        @else
                            <span class="text-slate-500 italic">-</span>
                        @endif
                    </span>
                </div>

                {{-- Tanggal Lahir --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">Tanggal Lahir</span>
                    <span class="text-sm font-semibold text-white">
                        {{ $wisudawan->tanggal_lahir ? date('d F Y', strtotime($wisudawan->tanggal_lahir)) : '-' }}
                    </span>
                </div>

                {{-- NPWP --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">NPWP</span>
                    <span class="font-mono text-sm font-semibold {{ $wisudawan->npwp ? 'text-white' : 'text-slate-500 italic' }}">
                        {{ $wisudawan->npwp ?? 'Belum diisi' }}
                    </span>
                </div>

                {{-- Email --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">Email</span>
                    <span class="text-sm font-semibold {{ $wisudawan->email ? 'text-indigo-300' : 'text-slate-500 italic' }}">
                        {{ $wisudawan->email ?? 'Belum diisi' }}
                    </span>
                </div>

                {{-- No. HP / WhatsApp --}}
                <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800/80">
                    <span class="text-[11px] text-slate-400 block font-semibold uppercase">No. HP / WhatsApp</span>
                    <span class="font-mono text-sm font-semibold {{ $wisudawan->no_hp ? 'text-emerald-400' : 'text-slate-500 italic' }}">
                        {{ $wisudawan->no_hp ?? 'Belum diisi' }}
                    </span>
                </div>
            </div>
        </div>

        {{-- Academic Summary Subcard --}}
        <div class="pt-2 border-t border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
            <div>
                <span class="text-slate-500 block font-medium">Tahun Kelulusan</span>
                <span class="font-bold text-white">{{ $wisudawan->tahun }}</span>
            </div>
            <div>
                <span class="text-slate-500 block font-medium">Periode Wisuda</span>
                <span class="font-bold text-white">{{ $wisudawan->periodeWisuda->nama_periode ?? '-' }}</span>
            </div>
            <div>
                <span class="text-slate-500 block font-medium">Indeks Prestasi Kumulatif (IPK)</span>
                <span class="font-extrabold text-emerald-400">{{ number_format($wisudawan->ipk, 2) }}</span>
            </div>
            <div>
                <span class="text-slate-500 block font-medium">Predikat Kelulusan</span>
                <span class="font-bold text-indigo-300">{{ $wisudawan->predikat ?? '-' }}</span>
            </div>
        </div>
    </div>

    <!-- MODAL EDIT DATA WISUDAWAN / ALUMNI -->
    <div id="modalProfile" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden transition-all duration-300">
        <div class="bg-slate-900 border border-slate-700 rounded-3xl max-w-2xl w-full p-6 md:p-8 space-y-6 shadow-2xl relative max-h-[90vh] overflow-y-auto">
            
            {{-- Modal Header --}}
            <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
                        <i class="fas fa-user-edit text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">Edit Identitas & Biodata Alumni</h3>
                        <p class="text-xs text-slate-400">Perbarui data profil identitas Anda sebelum melengkapi kuesioner</p>
                    </div>
                </div>
                <button type="button" onclick="closeProfileModal()" class="w-8 h-8 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white flex items-center justify-center transition-all">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            {{-- Modal Form --}}
            <form action="{{ route('public.tracer.update_profile') }}" method="POST" class="space-y-4">
                @csrf

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {{-- No. Alumni (Disabled) --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">No. Alumni</label>
                        <input type="text" value="{{ $wisudawan->no_alumni }}" disabled class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-400 font-mono text-sm cursor-not-allowed">
                        <span class="text-[10px] text-slate-500 mt-1 block">Primary key unik alumni</span>
                    </div>

                    {{-- NIM (Disabled) --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">NIM (Nomor Induk Mahasiswa)</label>
                        <input type="text" value="{{ $wisudawan->nim }}" disabled class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-400 font-mono text-sm cursor-not-allowed">
                    </div>

                    {{-- Nama Lengkap --}}
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">Nama Lengkap *</label>
                        <input type="text" name="nama_lengkap" value="{{ old('nama_lengkap', $wisudawan->nama_lengkap) }}" required class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    </div>

                    {{-- NIK (No. KTP) --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">NIK (No. KTP)</label>
                        <input type="text" name="nik" value="{{ old('nik', $wisudawan->nik) }}" placeholder="16 digit NIK" maxlength="30" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm font-mono transition-all">
                    </div>

                    {{-- Jenis Kelamin --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">Jenis Kelamin *</label>
                        <select name="jenis_kelamin" required class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-indigo-500 text-sm transition-all">
                            <option value="L" {{ old('jenis_kelamin', $wisudawan->jenis_kelamin) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                            <option value="P" {{ old('jenis_kelamin', $wisudawan->jenis_kelamin) == 'P' ? 'selected' : '' }}>Perempuan</option>
                        </select>
                    </div>

                    {{-- Tanggal Lahir --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">Tanggal Lahir *</label>
                        <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $wisudawan->tanggal_lahir ? date('Y-m-d', strtotime($wisudawan->tanggal_lahir)) : '') }}" required class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    </div>

                    {{-- NPWP --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">NPWP</label>
                        <input type="text" name="npwp" value="{{ old('npwp', $wisudawan->npwp) }}" placeholder="Nomor Pokok Wajib Pajak" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    </div>

                    {{-- Email --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">Email</label>
                        <input type="email" name="email" value="{{ old('email', $wisudawan->email) }}" placeholder="alumni@email.com" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    </div>

                    {{-- No. HP / WhatsApp --}}
                    <div>
                        <label class="block text-xs font-bold text-slate-300 uppercase mb-1.5">No. HP / WhatsApp</label>
                        <input type="text" name="no_hp" value="{{ old('no_hp', $wisudawan->no_hp) }}" placeholder="08xxxxxxxxxx" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    </div>
                </div>

                {{-- Modal Footer Buttons --}}
                <div class="pt-4 border-t border-slate-800 flex items-center justify-end gap-3">
                    <button type="button" onclick="closeProfileModal()" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold text-xs transition-all">
                        Batal
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs shadow-lg shadow-indigo-600/30 transition-all flex items-center gap-2">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- QUESTIONNAIRE SURVEY FORM -->
    <form action="{{ route('public.tracer.submit') }}" method="POST" class="space-y-6">
        @csrf

        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6 shadow-xl">
            <div class="flex items-center justify-between border-b border-slate-800 pb-4 flex-wrap gap-2">
                <div>
                    <h3 class="text-xl font-bold text-white flex items-center gap-2">
                        <i class="fas fa-clipboard-list text-indigo-400"></i> Kuesioner Pelacakan Alumni (Tracer Study)
                    </h3>
                    <p class="text-xs text-slate-400 mt-1">Harap menjawab setiap pertanyaan dengan jujur dan akurat sesuai status terkini Anda.</p>
                </div>
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-slate-800 text-slate-300 border border-slate-700">
                    Total {{ count($kuesioner) }} Pertanyaan
                </span>
            </div>

            @forelse ($kuesioner as $index => $q)
                <div class="space-y-3 p-5 rounded-2xl bg-slate-950 border border-slate-800/80 transition-all hover:border-slate-700">
                    <div class="flex items-center justify-between gap-2 flex-wrap">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-mono font-bold text-indigo-400 bg-indigo-950/60 border border-indigo-800/50 px-2 py-0.5 rounded-lg">
                                #{{ $index + 1 }}
                            </span>
                            <span class="text-[11px] font-mono text-slate-400">
                                {{ $q->kode_pertanyaan }}
                            </span>
                        </div>
                        <span class="text-[10px] uppercase tracking-wider font-bold px-2.5 py-0.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700">
                            {{ $q->kategori }}
                        </span>
                    </div>

                    <label class="block text-sm font-bold text-white leading-relaxed">
                        {!! nl2br(e($q->teks_pertanyaan)) !!}
                        @if ($q->is_wajib)
                            <span class="text-rose-400" title="Pertanyaan Wajib">*</span>
                        @endif
                    </label>

                    @php
                        $savedVal = $jawabanSaved[$q->id_kuesioner] ?? null;
                        $savedOpsi = $jawabanOpsiSaved[$q->id_kuesioner] ?? null;
                    @endphp

                    {{-- 1. TIPE: RADIO --}}
                    @if ($q->tipe_jawaban == 'radio')
                        @if ($q->opsiJawaban->isNotEmpty())
                            <div class="space-y-2 pt-2">
                                @foreach ($q->opsiJawaban->sortBy('urutan') as $opt)
                                    @php
                                        $isChecked = ($savedOpsi == $opt->id_opsi) || ($savedVal == $opt->id_opsi) || ($savedVal == $opt->teks_opsi);
                                    @endphp
                                    <label class="flex items-center gap-3 p-3 rounded-xl bg-slate-900 hover:bg-slate-850 cursor-pointer border border-slate-800 hover:border-indigo-500/50 transition-all {{ $isChecked ? 'border-indigo-500/70 bg-indigo-950/20' : '' }}">
                                        <input type="radio" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $opt->id_opsi }}" {{ $isChecked ? 'checked' : '' }} {{ $q->is_wajib ? 'required' : '' }} class="w-4 h-4 text-indigo-600 bg-slate-950 border-slate-700 focus:ring-indigo-500">
                                        <span class="text-sm text-slate-200">{{ $opt->teks_opsi }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @else
                            {{-- Fallback jika opsi belum ada di DB --}}
                            <div class="pt-2">
                                <input type="text" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $savedVal }}" {{ $q->is_wajib ? 'required' : '' }} placeholder="Pilihan jawaban Anda..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                            </div>
                        @endif

                    {{-- 2. TIPE: CHECKBOX (MULTI-SELECT / PILIHAN BANYAK) --}}
                    @elseif ($q->tipe_jawaban == 'checkbox')
                        <div class="space-y-3 pt-2">
                            <div class="flex items-center gap-2 text-indigo-400 text-xs font-semibold">
                                <i class="fas fa-check-double"></i>
                                <span>Pilihan Banyak (Anda dapat memilih lebih dari satu jawaban yang sesuai)</span>
                            </div>

                            @php
                                $savedCheckbox = [];
                                if (!empty($savedVal)) {
                                    if (is_array($savedVal)) {
                                        $savedCheckbox = $savedVal;
                                    } elseif (str_starts_with(trim($savedVal), '[') && str_ends_with(trim($savedVal), ']')) {
                                        $decoded = json_decode($savedVal, true);
                                        $savedCheckbox = is_array($decoded) ? $decoded : [$savedVal];
                                    } else {
                                        $savedCheckbox = array_map('trim', explode(',', $savedVal));
                                    }
                                }

                                // Ambil opsi dari database atau gunakan daftar standar jika kosong
                                $checkboxOptions = [];
                                if ($q->opsiJawaban->isNotEmpty()) {
                                    foreach ($q->opsiJawaban->sortBy('urutan') as $opt) {
                                        $checkboxOptions[] = [
                                            'id' => $opt->id_opsi,
                                            'text' => $opt->teks_opsi
                                        ];
                                    }
                                } elseif ($q->kode_pertanyaan == 'METBEL_09' || str_contains(strtolower($q->teks_pertanyaan), 'mencari pekerjaan')) {
                                    $checkboxOptions = [
                                        ['id' => '1', 'text' => 'Melalui iklan di koran/majalah, brosur'],
                                        ['id' => '2', 'text' => 'Melamar ke perusahaan/instansi secara langsung tanpa mengetahui lowongan'],
                                        ['id' => '3', 'text' => 'Pergi ke bursa kerja / Job Fair'],
                                        ['id' => '4', 'text' => 'Mencari lewat internet / portal lowongan online / media sosial (LinkedIn, Jobstreet, dll.)'],
                                        ['id' => '5', 'text' => 'Dihubungi langsung oleh perusahaan / pemberi kerja'],
                                        ['id' => '6', 'text' => 'Menghubungi Kemenakertrans / Disnaker'],
                                        ['id' => '7', 'text' => 'Menghubungi agen tenaga kerja komersial/swasta'],
                                        ['id' => '8', 'text' => 'Mendapatkan informasi dari Pusat Karir / Tracer Study Universitas Cenderawasih'],
                                        ['id' => '9', 'text' => 'Menghubungi ikatan alumni / sesama alumni'],
                                        ['id' => '10', 'text' => 'Membangun jejaring (networking) sejak masih kuliah'],
                                        ['id' => '11', 'text' => 'Melalui relasi (misalnya orang tua, kawan, dosen, dll.)'],
                                        ['id' => '12', 'text' => 'Membangun bisnis / usaha mandiri'],
                                        ['id' => '13', 'text' => 'Melalui penempatan kerja atau program magang'],
                                        ['id' => '14', 'text' => 'Bekerja di tempat yang sama dengan tempat kerja semasa kuliah'],
                                    ];
                                } elseif ($q->kode_pertanyaan == 'METBEL_14' || str_contains(strtolower($q->teks_pertanyaan), 'tidak sesuai') || str_contains(strtolower($q->teks_pertanyaan), 'mengapa anda mengambil')) {
                                    $checkboxOptions = [
                                        ['id' => '1', 'text' => 'Pertanyaan tidak sesuai; pekerjaan saya saat ini sudah sesuai dengan bidang pendidikan'],
                                        ['id' => '2', 'text' => 'Saya belum mendapatkan pekerjaan yang lebih sesuai dengan bidang ilmu'],
                                        ['id' => '3', 'text' => 'Di pekerjaan ini saya memperoleh pendapatan / gaji yang lebih tinggi'],
                                        ['id' => '4', 'text' => 'Di pekerjaan ini lebih menjamin prospek karir dan jenjang promosi yang baik'],
                                        ['id' => '5', 'text' => 'Saya lebih menyukai / berminat bekerja di bidang ini'],
                                        ['id' => '6', 'text' => 'Lokasi tempat kerja lebih dekat dengan tempat tinggal / keluarga'],
                                        ['id' => '7', 'text' => 'Fleksibilitas waktu kerja yang lebih baik'],
                                        ['id' => '8', 'text' => 'Pekerjaan ini lebih aman, stabil, dan terjamin'],
                                        ['id' => '9', 'text' => 'Saya dipromosikan ke posisi ini'],
                                        ['id' => '10', 'text' => 'Mendapat tawaran kerja langsung dari perusahaan / instansi'],
                                    ];
                                }
                            @endphp

                            @if (!empty($checkboxOptions))
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2.5" data-question-group="checkbox_{{ $q->id_kuesioner }}" data-is-wajib="{{ $q->is_wajib ? '1' : '0' }}">
                                    @foreach ($checkboxOptions as $opt)
                                        @php
                                            $optId = $opt['id'];
                                            $optText = $opt['text'];
                                            $isCbChecked = in_array((string)$optId, array_map('strval', $savedCheckbox)) 
                                                || in_array($optText, $savedCheckbox) 
                                                || in_array((string)$loop->iteration, array_map('strval', $savedCheckbox));
                                            if (!$isCbChecked && !empty($savedVal) && is_string($savedVal)) {
                                                $isCbChecked = str_contains($savedVal, $optText);
                                            }
                                        @endphp
                                        <label class="checkbox-option flex items-start gap-3 p-3.5 rounded-2xl bg-slate-900 hover:bg-slate-850 cursor-pointer border border-slate-800 hover:border-indigo-500/50 transition-all select-none {{ $isCbChecked ? 'border-indigo-500/80 bg-indigo-950/30' : '' }}">
                                            <input type="checkbox" name="jawaban[{{ $q->id_kuesioner }}][]" value="{{ $optId }}" {{ $isCbChecked ? 'checked' : '' }} onchange="handleCheckboxChange(this)" class="w-4 h-4 mt-0.5 text-indigo-600 rounded bg-slate-950 border-slate-700 focus:ring-indigo-500 flex-shrink-0">
                                            <span class="text-xs sm:text-sm text-slate-200 leading-relaxed">{{ $optText }}</span>
                                        </label>
                                    @endforeach
                                </div>

                                {{-- Input Tambahan Lainnya --}}
                                <div class="p-3 rounded-2xl bg-slate-900/60 border border-slate-800/80 flex items-center gap-2">
                                    <span class="text-xs font-semibold text-slate-400 whitespace-nowrap"><i class="fas fa-pen text-indigo-400 me-1"></i> Lainnya:</span>
                                    <input type="text" name="jawaban_lainnya[{{ $q->id_kuesioner }}]" placeholder="Tuliskan pilihan jawaban lainnya jika ada..." class="w-full bg-transparent text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none">
                                </div>
                            @else
                                <div class="space-y-2">
                                    <input type="text" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $savedVal }}" {{ $q->is_wajib ? 'required' : '' }} placeholder="Tuliskan jawaban-jawaban Anda (pisahkan dengan koma jika lebih dari satu)..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                                </div>
                            @endif
                        </div>

                    {{-- 3. TIPE: SKALA 1 - 5 --}}
                    @elseif ($q->tipe_jawaban == 'skala_1_5')
                        @if ($q->opsiJawaban->isNotEmpty())
                            <div class="grid grid-cols-2 sm:grid-cols-5 gap-2.5 pt-3">
                                @foreach ($q->opsiJawaban->sortBy('urutan') as $opt)
                                    @php
                                        $scaleVal = $opt->nilai_angka ?? $opt->id_opsi;
                                        $isScaleChecked = ($savedOpsi == $opt->id_opsi) || ($savedVal == $scaleVal) || ($savedVal == $opt->teks_opsi);
                                    @endphp
                                    <label class="p-3 rounded-2xl bg-slate-900 border border-slate-800 hover:border-indigo-500/50 cursor-pointer transition-all flex flex-col items-center gap-1 text-center {{ $isScaleChecked ? 'border-indigo-500 bg-indigo-950/40 shadow-md shadow-indigo-500/10' : '' }}">
                                        <input type="radio" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $opt->id_opsi }}" {{ $isScaleChecked ? 'checked' : '' }} {{ $q->is_wajib ? 'required' : '' }} class="w-4 h-4 text-indigo-600 bg-slate-950 border-slate-700">
                                        <span class="font-extrabold text-white text-base mt-1">{{ $opt->nilai_angka ?? $loop->iteration }}</span>
                                        <span class="text-[10px] text-slate-300">{{ $opt->teks_opsi }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @else
                            <div class="grid grid-cols-2 sm:grid-cols-5 gap-2.5 pt-3 text-center">
                                @php
                                    $scaleLabels = [
                                        '1' => 'Sangat Rendah',
                                        '2' => 'Rendah',
                                        '3' => 'Cukup',
                                        '4' => 'Tinggi',
                                        '5' => 'Sangat Tinggi'
                                    ];
                                @endphp
                                @foreach ($scaleLabels as $skalaVal => $skalaLabel)
                                    @php
                                        $isScaleChecked = ($savedVal == $skalaVal) || ($savedVal == $skalaLabel);
                                    @endphp
                                    <label class="p-3 rounded-2xl bg-slate-900 border border-slate-800 hover:border-indigo-500/50 cursor-pointer transition-all flex flex-col items-center gap-1 {{ $isScaleChecked ? 'border-indigo-500 bg-indigo-950/40 shadow-md shadow-indigo-500/10' : '' }}">
                                        <input type="radio" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $skalaVal }}" {{ $isScaleChecked ? 'checked' : '' }} {{ $q->is_wajib ? 'required' : '' }} class="w-4 h-4 text-indigo-600 bg-slate-950 border-slate-700">
                                        <span class="font-extrabold text-white text-base mt-1">{{ $skalaVal }}</span>
                                        <span class="text-[10px] text-slate-400">{{ $skalaLabel }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @endif

                    {{-- 4. TIPE: NUMBER --}}
                    @elseif ($q->tipe_jawaban == 'number')
                        <div class="pt-2">
                            <input type="number" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $savedVal }}" {{ $q->is_wajib ? 'required' : '' }} placeholder="Masukkan angka (Contoh: 3, 4000000)..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm font-mono transition-all">
                        </div>

                    {{-- 5. TIPE: TEXT / TEXTAREA --}}
                    @elseif ($q->tipe_jawaban == 'text')
                        <div class="pt-2">
                            @if (str_contains(strtolower($q->kode_pertanyaan), 'saran') || str_contains(strtolower($q->kode_pertanyaan), 'krisar') || str_contains(strtolower($q->teks_pertanyaan), 'saran') || str_contains(strtolower($q->teks_pertanyaan), 'kritik') || strlen($q->teks_pertanyaan) > 60)
                                <textarea name="jawaban[{{ $q->id_kuesioner }}]" rows="3" {{ $q->is_wajib ? 'required' : '' }} placeholder="Tuliskan masukan, uraian, atau tanggapan Anda di sini..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">{{ $savedVal }}</textarea>
                            @else
                                <input type="text" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $savedVal }}" {{ $q->is_wajib ? 'required' : '' }} placeholder="Masukkan jawaban Anda..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                            @endif
                        </div>

                    {{-- FALLBACK LAINNYA --}}
                    @else
                        <div class="pt-2">
                            <input type="text" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $savedVal }}" {{ $q->is_wajib ? 'required' : '' }} placeholder="Masukkan jawaban..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                        </div>
                    @endif
                </div>
            @empty
                <div class="text-center py-10 text-slate-500 space-y-2">
                    <i class="fas fa-inbox text-3xl"></i>
                    <p class="text-sm">Belum ada pertanyaan kuesioner tracer study yang aktif.</p>
                </div>
            @endforelse
        </div>

        {{-- Submit Button --}}
        <button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-extrabold text-base transition-all shadow-xl shadow-indigo-600/30 flex items-center justify-center gap-2">
            <i class="fas fa-paper-plane"></i> Kirimkan & Simpan Kuesioner Tracer Study
        </button>
    </form>

</div>

<script>
    function openProfileModal() {
        const modal = document.getElementById('modalProfile');
        if (modal) {
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
    }

    function closeProfileModal() {
        const modal = document.getElementById('modalProfile');
        if (modal) {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    }

    // Toggle active styles on Checkbox change
    function handleCheckboxChange(cb) {
        const label = cb.closest('.checkbox-option') || cb.closest('label');
        if (label) {
            if (cb.checked) {
                label.classList.add('border-indigo-500/80', 'bg-indigo-950/30');
            } else {
                label.classList.remove('border-indigo-500/80', 'bg-indigo-950/30');
            }
        }
    }

    // Dynamic highlights for Radio & Scale inputs
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('input[type="radio"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const groupName = this.getAttribute('name');
                if (groupName) {
                    document.querySelectorAll(`input[name="${groupName}"]`).forEach(r => {
                        const lbl = r.closest('label');
                        if (lbl) {
                            lbl.classList.remove('border-indigo-500', 'border-indigo-500/70', 'bg-indigo-950/20', 'bg-indigo-950/40', 'shadow-md');
                        }
                    });
                    const currentLbl = this.closest('label');
                    if (currentLbl) {
                        currentLbl.classList.add('border-indigo-500', 'bg-indigo-950/30', 'shadow-md');
                    }
                }
            });
        });
    });

    // Close on backdrop click or ESC key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeProfileModal();
        }
    });

    document.getElementById('modalProfile')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeProfileModal();
        }
    });
</script>
@endsection