@extends('layouts.app')

@section('title', 'Tracer Study')

@section('content')
<div class="row">
    <!-- Header & Action Buttons -->
    <div class="col-12 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h3 class="font-bold text-dark m-0">Kuesioner & Rekapitulasi Tracer Study</h3>
            <p class="text-muted small m-0">Manajemen instrumen kuesioner pelacakan alumni Universitas Cenderawasih</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            @if (Auth::user()->kode_role === 'ADMIN')
                <button type="button" class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahPertanyaan">
                    <i class="fas fa-plus me-1"></i> Tambah Pertanyaan
                </button>
                <button type="button" class="btn btn-info text-white btn-sm rounded-pill px-3 shadow-sm font-semibold" data-bs-toggle="modal" data-bs-target="#modalTambahJawaban">
                    <i class="fas fa-comment-medical me-1"></i> Tambah Jawaban
                </button>
            @endif
            <a href="{{ route('export.tracer', request()->query()) }}" class="btn btn-success btn-sm rounded-pill px-3 shadow-sm font-semibold">
                <i class="fas fa-file-excel me-1"></i> Export Laporan Excel (.XLS)
            </a>
            <a href="{{ route('public.tracer.login') }}" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                <i class="fas fa-external-link-alt me-1"></i> Form Alumni
            </a>
        </div>
    </div>

    <!-- 4 Metrics Cards -->
    <div class="col-md-3 mb-4">
        <div class="card card-custom bg-white p-4">
            <span class="text-muted text-uppercase small font-bold">Total Target Alumni</span>
            <h3 class="font-bold text-dark mt-2">{{ number_format($totalAlumni) }}</h3>
            <small class="text-primary font-semibold">Alumni Terdaftar di Sistem</small>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom bg-white p-4">
            <span class="text-muted text-uppercase small font-bold">Responden Mengisi</span>
            <h3 class="font-bold text-info mt-2">{{ number_format($totalPengisi) }}</h3>
            <small class="text-muted">Total Mulai Mengisi</small>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom bg-white p-4">
            <span class="text-muted text-uppercase small font-bold">Selesai 100%</span>
            <h3 class="font-bold text-success mt-2">{{ number_format($totalSelesai) }}</h3>
            <small class="text-success font-semibold">Kuesioner Terverifikasi</small>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom bg-white p-4">
            <span class="text-muted text-uppercase small font-bold">Tingkat Partisipasi</span>
            <h3 class="font-bold text-primary mt-2">{{ $persenPartisipasi }}%</h3>
            <div class="progress rounded-pill mt-2" style="height: 6px;">
                <div class="progress-bar bg-primary" style="width: {{ $persenPartisipasi }}%"></div>
            </div>
        </div>
    </div>

    <!-- Kemdikbud Tracer Study Visual Analytics Section -->
    <div class="col-12 mb-4">
        <x-tracer-charts :data="$tracerStatistikData" title="Visualisasi Tracer Study Kemdikbud (IKU 1 & Masa Tunggu Kerja)" />
    </div>

    <!-- TAB 1: DAFTAR PERTANYAAN KUESIONER (CRUD EDIT & DELETE - HANYA ADMIN) -->

    @if (Auth::user()->kode_role === 'ADMIN')
    <div class="col-12 mb-4">
        <div class="card card-custom bg-white p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="font-bold text-dark m-0"><i class="fas fa-list-check text-primary me-2"></i> Daftar Pertanyaan Kuesioner Tracer Study</h5>
                <button type="button" class="btn btn-outline-primary btn-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#modalTambahPertanyaan">
                    <i class="fas fa-plus me-1"></i> Tambah Pertanyaan
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-dark">
                        <tr class="small text-uppercase">
                            <th width="5%">Urut</th>
                            <th width="15%">Kategori</th>
                            <th width="35%">Teks Pertanyaan</th>
                            <th width="12%">Tipe Input</th>
                            <th width="8%">Wajib</th>
                            <th width="15%">Opsi Jawaban</th>
                            <th width="10%" class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($kuesioner as $q)
                            <tr>
                                <td class="font-mono font-bold text-center">{{ $q->urutan }}</td>
                                <td><span class="badge bg-primary-subtle text-primary border border-primary-subtle">{{ $q->kategori }}</span></td>
                                <td class="font-semibold text-dark">{{ $q->teks_pertanyaan }}</td>
                                <td><span class="badge bg-secondary">{{ $q->tipe_jawaban }}</span></td>
                                <td>
                                    <span class="badge {{ $q->is_wajib ? 'bg-danger' : 'bg-secondary' }}">
                                        {{ $q->is_wajib ? 'Wajib' : 'Opsional' }}
                                    </span>
                                </td>
                                <td>
                                    @if ($q->opsiJawaban->count() > 0)
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach ($q->opsiJawaban as $opt)
                                                <span class="badge bg-light text-dark border small">{{ $opt->teks_opsi }}</span>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-muted small italic">Input Isian Bebas</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-outline-warning btn-sm me-1" data-bs-toggle="modal" data-bs-target="#modalEditPertanyaan{{ $q->id_kuesioner }}" title="Edit Pertanyaan">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form action="{{ route('tracer.pertanyaan.destroy', $q->id_kuesioner) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus pertanyaan ini?')" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-muted py-4">Belum ada pertanyaan kuesioner.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- TAB 2: MONITORING HASIL RESPON JAWABAN ALUMNI -->
    <div class="col-12 mb-4">
        <div class="card card-custom bg-white p-4">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <h5 class="font-bold text-dark m-0"><i class="fas fa-comments text-info me-2"></i> Rekapitulasi Respon Jawaban Alumni</h5>
                <div class="d-flex align-items-center gap-2">
                    @if (Auth::user()->kode_role === 'ADMIN')
                        <button type="button" class="btn btn-primary btn-sm rounded-pill font-semibold px-3" data-bs-toggle="modal" data-bs-target="#modalTambahJawaban">
                            <i class="fas fa-plus me-1"></i> Tambah Jawaban
                        </button>
                    @endif
                    <a href="{{ route('export.tracer', request()->query()) }}" class="btn btn-outline-success btn-sm rounded-pill font-semibold">
                        <i class="fas fa-file-excel me-1"></i> Export Data Respon (.XLS)
                    </a>
                </div>
            </div>

            <!-- Multi-Criteria Filter Bar -->
            <form method="GET" action="{{ route('tracer.index') }}" class="row g-3 p-3 bg-light rounded-4 mb-4">
                <div class="col-md-3">
                    <label class="form-label small font-bold text-uppercase text-muted">Cari Kata Kunci</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari NIM, Nama, Jawaban..." class="form-control form-control-sm rounded-3">
                </div>

                <div class="col-md-3">
                    <label class="form-label small font-bold text-uppercase text-muted">Fakultas</label>
                    <select name="kode_fakultas" id="tracerFilterFakultas" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Fakultas --</option>
                        @foreach ($fakultasList as $f)
                            <option value="{{ $f->kode_fakultas }}" {{ request('kode_fakultas') == $f->kode_fakultas ? 'selected' : '' }}>
                                {{ $f->nama_fakultas }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label small font-bold text-uppercase text-muted">Program Studi</label>
                    <select name="kode_prodi" id="tracerFilterProdi" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Prodi --</option>
                        @foreach ($prodiList as $p)
                            <option value="{{ $p->kode_prodi }}" data-fakultas="{{ $p->kode_fakultas }}" {{ request('kode_prodi') == $p->kode_prodi ? 'selected' : '' }}>
                                {{ $p->nama_prodi }} ({{ $p->jenjang }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label small font-bold text-uppercase text-muted">Status Pengisian</label>
                    <select name="status_pengisian" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Status --</option>
                        <option value="selesai" {{ request('status_pengisian') == 'selesai' ? 'selected' : '' }}>Selesai</option>
                        <option value="sedang" {{ request('status_pengisian') == 'sedang' ? 'selected' : '' }}>Sedang Mengisi</option>
                        <option value="belum" {{ request('status_pengisian') == 'belum' ? 'selected' : '' }}>Belum Mengisi</option>
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label small font-bold text-uppercase text-muted">Tahun</label>
                    <input type="number" name="tahun" value="{{ request('tahun') }}" placeholder="2025" class="form-control form-control-sm rounded-3">
                </div>

                <div class="col-md-1 d-flex align-items-end gap-1">
                    <button type="submit" class="btn btn-primary btn-sm rounded-3 w-100 font-semibold" title="Terapkan Filter">
                        <i class="fas fa-search"></i>
                    </button>
                    <a href="{{ route('tracer.index') }}" class="btn btn-outline-secondary btn-sm rounded-3" title="Reset Filter">
                        <i class="fas fa-undo"></i>
                    </a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-dark">
                        <tr class="small text-uppercase">
                            <th>No Alumni</th>
                            <th>NIM</th>
                            <th>Nama Wisudawan</th>
                            <th>Program Studi</th>
                            <th>Tahun</th>
                            <th>Status Pengisian</th>
                            <th>Progres Jawaban</th>
                            <th>Waktu Pengisian</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($alumniList as $alumni)
                            <tr>
                                <td class="font-mono text-primary font-bold small">{{ $alumni->no_alumni }}</td>
                                <td class="font-mono text-muted small">{{ $alumni->nim }}</td>
                                <td class="font-bold text-dark">{{ $alumni->nama_lengkap }}</td>
                                <td class="small">{{ $alumni->prodi->nama_prodi ?? '-' }} ({{ $alumni->prodi->jenjang ?? 'S1' }})</td>
                                <td class="font-mono small text-center">{{ $alumni->tahun ?? '-' }}</td>
                                <td>
                                    @php
                                        $st = $alumni->tracerStatus->status_pengisian ?? 'belum';
                                    @endphp
                                    @if ($st === 'selesai')
                                        <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1">
                                            <i class="fas fa-check-circle me-1"></i> Selesai
                                        </span>
                                    @elseif ($st === 'sedang')
                                        <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2.5 py-1">
                                            <i class="fas fa-spinner fa-spin me-1"></i> Sedang
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2.5 py-1">
                                            <i class="fas fa-minus-circle me-1"></i> Belum
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $totalQ = $kuesioner->count();
                                        $answeredQ = $alumni->tracerJawaban->count();
                                        $percentQ = $totalQ > 0 ? round(($answeredQ / $totalQ) * 100) : 0;
                                    @endphp
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1 rounded-pill" style="height: 6px; min-width: 60px;">
                                            <div class="progress-bar {{ $st === 'selesai' ? 'bg-success' : ($st === 'sedang' ? 'bg-warning' : 'bg-secondary') }}" style="width: {{ $percentQ }}%"></div>
                                        </div>
                                        <small class="font-mono font-bold {{ $answeredQ > 0 ? 'text-dark' : 'text-muted' }}">{{ $answeredQ }}/{{ $totalQ }}</small>
                                    </div>
                                </td>
                                <td class="small text-muted">
                                    {{ $alumni->tracerStatus && $alumni->tracerStatus->tanggal_selesai ? date('d/m/Y H:i', strtotime($alumni->tracerStatus->tanggal_selesai)) : ($alumni->tracerStatus && $alumni->tracerStatus->updated_at ? date('d/m/Y H:i', strtotime($alumni->tracerStatus->updated_at)) : '-') }}
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3 me-1 font-semibold" data-bs-toggle="modal" data-bs-target="#modalDetailAlumni{{ $alumni->no_alumni }}" title="Lihat Hasil Jawaban Kuesioner Alumni">
                                        <i class="fas fa-eye me-1"></i> Detail
                                    </button>
                                    <a href="{{ route('public.tracer.login', ['nim' => $alumni->nim]) }}" target="_blank" class="btn btn-outline-secondary btn-sm rounded-pill px-2" title="Buka Form Kuesioner Alumni">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="9" class="text-center text-muted py-4">Belum ada data alumni / respon tracer study yang sesuai filter.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $alumniList->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>

@if (Auth::user()->kode_role === 'ADMIN')
    <!-- Modal Tambah Pertanyaan (Placed outside table) -->
    <div class="modal fade" id="modalTambahPertanyaan" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header bg-primary text-white rounded-top-4">
                    <h5 class="modal-title font-bold"><i class="fas fa-plus-circle me-2"></i> Tambah Pertanyaan Kuesioner Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('tracer.pertanyaan.store') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small font-bold">Kategori Kuesioner *</label>
                                <input type="text" name="kategori" required placeholder="Contoh: Pekerjaan, Kesesuaian Bidang, Kepuasan" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small font-bold">Nomor Urut *</label>
                                <input type="number" name="urutan" value="{{ $kuesioner->count() + 1 }}" required class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small font-bold">Wajib Diisi? *</label>
                                <select name="is_wajib" required class="form-select">
                                    <option value="1" selected>Ya (Wajib)</option>
                                    <option value="0">Tidak (Opsional)</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label small font-bold">Teks Pertanyaan *</label>
                                <textarea name="teks_pertanyaan" rows="3" required placeholder="Tuliskan teks pertanyaan kuesioner..." class="form-control"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small font-bold">Tipe Jawaban *</label>
                                <select name="tipe_jawaban" required class="form-select">
                                    <option value="radio">Pilihan Ganda (Radio Button)</option>
                                    <option value="checkbox">Pilihan Banyak (Checkbox)</option>
                                    <option value="skala_1_5">Skala Nilai 1 - 5 (Sangat Buruk - Sangat Baik)</option>
                                    <option value="text">Teks Bebas Singkat / Uraian</option>
                                    <option value="number">Input Angka (Bulan / Gaji / Nominal)</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label small font-bold">Opsi Pilihan Jawaban (Jika tipe Radio / Checkbox)</label>
                                <textarea name="opsi_jawaban" rows="3" placeholder="Tuliskan satu opsi per baris...&#10;Contoh:&#10;Sangat Puas&#10;Puas&#10;Kurang Puas" class="form-control"></textarea>
                                <small class="text-muted">Masukkan satu opsi pilihan per baris.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary btn-sm font-bold rounded-3 px-4">Simpan Pertanyaan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Jawaban Responden (Admin) -->
    <div class="modal fade" id="modalTambahJawaban" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header bg-info text-white rounded-top-4">
                    <h5 class="modal-title font-bold"><i class="fas fa-comment-medical me-2"></i> Tambah Respon Jawaban Alumni</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('tracer.jawaban.store') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label small font-bold">Pilih Alumni / Wisudawan *</label>
                                <select name="no_alumni" required class="form-select">
                                    <option value="">-- Pilih Alumni / Wisudawan --</option>
                                    @foreach ($wisudawanList as $w)
                                        <option value="{{ $w->no_alumni }}">
                                            {{ $w->no_alumni }} - {{ $w->nim }} - {{ $w->nama_lengkap }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label small font-bold">Pilih Pertanyaan Kuesioner *</label>
                                <select name="id_kuesioner" id="selectPertanyaanTambah" required class="form-select">
                                    <option value="">-- Pilih Pertanyaan --</option>
                                    @foreach ($kuesioner as $q)
                                        <option value="{{ $q->id_kuesioner }}" data-tipe="{{ $q->tipe_jawaban }}">
                                            #{{ $q->urutan }} [{{ ucfirst($q->kategori) }}] {{ Str::limit($q->teks_pertanyaan, 70) }} ({{ $q->tipe_jawaban }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label small font-bold">Jawaban Alumni *</label>
                                <textarea name="jawaban" rows="3" required placeholder="Tuliskan teks jawaban / angka / pilihan jawaban responden..." class="form-control"></textarea>
                                <small class="text-muted">Untuk pilihan angka (skala/gaji) masukkan angka, atau masukkan teks jawaban.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-info text-white font-bold btn-sm rounded-3 px-4">Simpan Respon</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modals Edit Pertanyaan (Placed outside table) -->
    @foreach ($kuesioner as $q)
        <div class="modal fade" id="modalEditPertanyaan{{ $q->id_kuesioner }}" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content rounded-4 border-0 shadow">
                    <div class="modal-header bg-warning text-dark rounded-top-4">
                        <h5 class="modal-title font-bold"><i class="fas fa-edit me-2"></i> Edit Pertanyaan #{{ $q->urutan }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="{{ route('tracer.pertanyaan.update', $q->id_kuesioner) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body p-4">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small font-bold">Kategori Kuesioner *</label>
                                    <input type="text" name="kategori" value="{{ $q->kategori }}" required class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small font-bold">Nomor Urut *</label>
                                    <input type="number" name="urutan" value="{{ $q->urutan }}" required class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small font-bold">Wajib Diisi? *</label>
                                    <select name="is_wajib" required class="form-select">
                                        <option value="1" {{ $q->is_wajib ? 'selected' : '' }}>Ya (Wajib)</option>
                                        <option value="0" {{ !$q->is_wajib ? 'selected' : '' }}>Tidak (Opsional)</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small font-bold">Teks Pertanyaan *</label>
                                    <textarea name="teks_pertanyaan" rows="3" required class="form-control">{{ $q->teks_pertanyaan }}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small font-bold">Tipe Jawaban *</label>
                                    <select name="tipe_jawaban" required class="form-select">
                                        <option value="radio" {{ $q->tipe_jawaban == 'radio' ? 'selected' : '' }}>Pilihan Ganda (Radio Button)</option>
                                        <option value="checkbox" {{ $q->tipe_jawaban == 'checkbox' ? 'selected' : '' }}>Pilihan Banyak (Checkbox)</option>
                                        <option value="skala_1_5" {{ $q->tipe_jawaban == 'skala_1_5' ? 'selected' : '' }}>Skala Nilai 1 - 5</option>
                                        <option value="text" {{ $q->tipe_jawaban == 'text' ? 'selected' : '' }}>Teks Bebas Singkat / Uraian</option>
                                        <option value="number" {{ $q->tipe_jawaban == 'number' ? 'selected' : '' }}>Input Angka (Bulan / Gaji)</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small font-bold">Opsi Pilihan Jawaban</label>
                                    @php
                                        $opsiText = $q->opsiJawaban->pluck('teks_opsi')->implode("\n");
                                    @endphp
                                    <textarea name="opsi_jawaban" rows="3" placeholder="Satu opsi per baris..." class="form-control">{{ $opsiText }}</textarea>
                                    <small class="text-muted">Masukkan satu opsi pilihan per baris.</small>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer bg-light">
                            <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-warning btn-sm font-bold text-dark rounded-3 px-4">Simpan Perubahan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
@endif

<!-- Modals Detail Hasil Respon Kuesioner per Alumni / NIM -->
@foreach ($alumniList as $alumni)
    <div class="modal fade" id="modalDetailAlumni{{ $alumni->no_alumni }}" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header bg-dark text-white rounded-top-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="p-2 rounded-3 bg-primary-subtle text-primary">
                            <i class="fas fa-user-graduate fs-5"></i>
                        </div>
                        <div>
                            <h5 class="modal-title font-bold mb-0">Hasil Respon Tracer Study Alumni</h5>
                            <small class="text-white opacity-75">{{ $alumni->nama_lengkap }} &bull; NIM: {{ $alumni->nim }}</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 bg-light">
                    <!-- Info Profil Alumni & Status -->
                    <div class="card border-0 shadow-sm rounded-3 p-3 mb-4 bg-white">
                        <div class="row g-3 align-items-center">
                            <div class="col-md-3">
                                <span class="text-muted small d-block">No Alumni & NIM</span>
                                <strong class="font-mono text-dark">{{ $alumni->no_alumni }} / {{ $alumni->nim }}</strong>
                            </div>
                            <div class="col-md-3">
                                <span class="text-muted small d-block">Program Studi</span>
                                <strong class="text-dark">{{ $alumni->prodi->nama_prodi ?? '-' }} ({{ $alumni->prodi->jenjang ?? 'S1' }})</strong>
                            </div>
                            <div class="col-md-2">
                                <span class="text-muted small d-block">Tahun / Periode</span>
                                <strong class="text-dark">{{ $alumni->tahun ?? '-' }}</strong>
                            </div>
                            <div class="col-md-2">
                                <span class="text-muted small d-block">Status Pengisian</span>
                                @php
                                    $st = $alumni->tracerStatus->status_pengisian ?? 'belum';
                                @endphp
                                @if ($st === 'selesai')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1">
                                        <i class="fas fa-check-circle me-1"></i> Selesai
                                    </span>
                                @elseif ($st === 'sedang')
                                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2.5 py-1">
                                        <i class="fas fa-spinner fa-spin me-1"></i> Sedang Mengisi
                                    </span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2.5 py-1">
                                        <i class="fas fa-minus-circle me-1"></i> Belum Mengisi
                                    </span>
                                @endif
                            </div>
                            <div class="col-md-2 text-md-end">
                                <a href="{{ route('public.tracer.login', ['nim' => $alumni->nim]) }}" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill px-3 font-semibold">
                                    <i class="fas fa-external-link-alt me-1"></i> Form Alumni
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Tabel Pertanyaan & Jawaban Alumni -->
                    <div class="card border-0 shadow-sm rounded-3 bg-white p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                            <h6 class="font-bold text-dark m-0">
                                <i class="fas fa-clipboard-list text-primary me-2"></i> Rekapitulasi Jawaban Responden
                            </h6>
                            <span class="badge bg-light text-dark border px-3 py-1.5 font-semibold">
                                Terisi: {{ $alumni->tracerJawaban->count() }} dari {{ $kuesioner->count() }} Pertanyaan
                            </span>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr class="small text-uppercase">
                                        <th width="5%" class="text-center">No</th>
                                        <th width="15%">Kategori</th>
                                        <th width="45%">Teks Pertanyaan</th>
                                        <th width="35%">Jawaban Alumni</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($kuesioner as $q)
                                        @php
                                            $ans = $alumni->tracerJawaban->firstWhere('id_kuesioner', $q->id_kuesioner);
                                        @endphp
                                        <tr>
                                            <td class="font-mono text-center font-bold text-muted">{{ $q->urutan }}</td>
                                            <td>
                                                <span class="badge bg-light text-dark border small">{{ ucfirst($q->kategori) }}</span>
                                            </td>
                                            <td class="small font-semibold text-dark">
                                                {{ $q->teks_pertanyaan }}
                                                @if ($q->is_wajib)
                                                    <span class="text-danger" title="Pertanyaan Wajib">*</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($ans)
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <span class="font-bold text-primary">
                                                            {{ $ans->opsiJawaban->teks_opsi ?? $ans->jawaban_teks ?? $ans->jawaban_angka ?? '-' }}
                                                        </span>
                                                        <small class="text-muted ms-2" style="font-size: 0.75rem;">
                                                            {{ $ans->created_at ? date('d/m H:i', strtotime($ans->created_at)) : '' }}
                                                        </small>
                                                    </div>
                                                @else
                                                    <span class="text-muted small italic">
                                                        <i class="fas fa-minus me-1"></i> Belum dijawab
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-3">Belum ada pertanyaan kuesioner.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill px-4" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endforeach
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fakultasSelect = document.getElementById('tracerFilterFakultas');
    const prodiSelect = document.getElementById('tracerFilterProdi');

    if (fakultasSelect && prodiSelect) {
        const allProdiOptions = Array.from(prodiSelect.querySelectorAll('option'));

        function filterProdiOptions() {
            const selectedFakultas = fakultasSelect.value;
            const currentProdiVal = prodiSelect.value;

            // Kosongkan opsi prodi terlebih dahulu
            prodiSelect.innerHTML = '';

            let hasCurrentSelected = false;

            allProdiOptions.forEach(opt => {
                const optFakultas = opt.getAttribute('data-fakultas');
                // Tampilkan opsi placeholder "-- Semua Prodi --" atau opsi prodi yang fakultasnya sesuai
                if (!opt.value || !selectedFakultas || optFakultas === selectedFakultas) {
                    const clonedOpt = opt.cloneNode(true);
                    if (opt.value && opt.value === currentProdiVal) {
                        clonedOpt.selected = true;
                        hasCurrentSelected = true;
                    }
                    prodiSelect.appendChild(clonedOpt);
                }
            });

            if (!hasCurrentSelected && selectedFakultas) {
                // Jika prodi yang dipilih sebelumnya tidak ada di fakultas baru, reset ke placeholder
                prodiSelect.value = '';
            }
        }

        fakultasSelect.addEventListener('change', filterProdiOptions);

        // Jalankan saat pertama kali halaman dimuat jika fakultas sudah terpilih
        if (fakultasSelect.value) {
            filterProdiOptions();
        }
    }
});
</script>
@endpush