@extends('admin.layout')

@section('page-title', 'Edit Data Alumni')@section('page-subtitle', 'Edit Hasil Pengisian Tracer Study')@section('content')
    <form method="POST" action="{{ route('alumni.update', $alumni->IDValueAlumni) }}" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- 1. Identitas Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
                    <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    Identitas Alumni <span class="ml-2 text-xs font-mono text-pink-500 font-bold">f1</span>
                </h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">NIM</label>
                    <input type="text" name="nim" value="{{ old('nim', $alumni->NoMhsw) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Kode PT</label>
                    <input type="text" name="kode_pt" value="{{ old('kode_pt', $alumni->KodePT) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Tahun Lulus</label>
                    <input type="text" name="tahun_lulus" value="{{ old('tahun_lulus', $alumni->TahunLulus) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Kode Prodi</label>
                    <input type="text" name="kode_prodi" value="{{ old('kode_prodi', $alumni->KodeProdi) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Nama Alumni</label>
                     <input type="text" name="name" value="{{ old('name', $alumni->Nama) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Nomor Telepon/HP</label>
                     <input type="text" name="phone" value="{{ old('phone', $alumni->Telp) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                     <input type="email" name="email" value="{{ old('email', $alumni->Email) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                 <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">NIK</label>
                     <input type="text" name="nik" value="{{ old('nik', $alumni->Nik) }}" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>

            </div>
        </div>

        @php
            $ts = $alumni;
            $emp = $alumni;
            $comp = $alumni;
            $learn = $alumni;
        @endphp

        <!-- 2. Tracer Study - Kuisioner Wajib -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Tracer Study - Kuisioner Wajib</h3>
            </div>
            <div class="p-6 space-y-6">
                <!-- f8 Status -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f8</span> Jelaskan status anda saat ini?
                    </label>
                    <div class="space-y-2 ml-4">
                        @foreach([
                                '1' => 'Bekerja (full time/part time)',
                                '2' => 'Belum Memungkinkan bekerja',
                                '3' => 'Wiraswasta',
                                '4' => 'Melanjutkan Pendidikan',
                                '5' => 'Tidak Kerja tetapi sedang mencari kerja'
                            ] as $val => $label)
                            <div class="flex items-center">
                                <input type="radio" name="status" value="{{ $val }}" {{ (old('status', $alumni->f8) == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- f504 Waktu Tunggu -->
                <div class="bg-gray-50 dark:bg-gray-700/30 p-4 rounded-md">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f504</span> Apakah anda telah mendapatkan pekerjaan <= 6 bulan?
                    </label>
                    <div class="ml-4 space-y-4">
                        <!-- Ya -->
                        <div class="flex items-center space-x-4"> 
                            <div class="flex items-center">
                                <input type="radio" name="dapat_kerja_6_bulan" value="1" {{ (old('dapat_kerja_6_bulan', $alumni->f504) == 1) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                                <span class="ml-2 text-sm font-semibold text-gray-700 dark:text-gray-300">[1] Ya</span>
                            </div>
                            <div class="flex items-center space-x-2">
                               <span class="text-sm text-gray-600 dark:text-gray-400">Dalam berapa bulan?</span>
                               <input type="number" name="bulan_dapat_kerja" value="{{ old('bulan_dapat_kerja', $alumni->f502) }}" class="w-20 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm">
                               <span class="text-xs text-pink-500 font-bold">(f5-02)</span>
                            </div>
                        </div>
                        <!-- Tidak -->
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center">
                                <input type="radio" name="dapat_kerja_6_bulan" value="2" {{ (old('dapat_kerja_6_bulan', $alumni->f504) == 2) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                                <span class="ml-2 text-sm font-semibold text-gray-700 dark:text-gray-300">[2] Tidak</span>
                            </div>
                            <div class="flex items-center space-x-2">
                               <span class="text-sm text-gray-600 dark:text-gray-400">Dalam berapa bulan?</span>
                               <input type="number" name="bulan_tidak_dapat_kerja" value="{{ old('bulan_tidak_dapat_kerja', $alumni->f506) }}" class="w-20 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm">
                                <span class="text-xs text-pink-500 font-bold">(f5-06)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- f505 Pendapatan -->
                <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f505</span> Berapa rata-rata pendapatan anda per bulan?
                    </label>
                    <div class="ml-4 w-full md:w-1/3">
                        <div class="relative rounded-md shadow-sm">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                              <span class="text-gray-500 sm:text-sm">Rp</span>
                            </div>
                            <input type="number" name="pendapatan" value="{{ old('pendapatan', $alumni->f505) }}" class="block w-full rounded-md border-gray-300 pl-10 focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                          </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Data Pekerjaan (Employment Info) -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Data Pekerjaan</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Lokasi Kerja -->
                <div class="md:col-span-2">
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Lokasi Tempat Bekerja <span class="text-pink-500 text-xs font-mono">(f5a1, f5a2)</span>
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
                            <label class="text-xs text-gray-500 mb-1 block">Provinsi</label>
                            <select id="province_select" name="province_id" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                <option value="">- Pilih Provinsi -</option>
                                @foreach($provinces as $prov)
                                    <option value="{{ $prov->id }}" {{ (old('province_id', $alumni->f5a1) == $prov->id) ? 'selected' : '' }}>{{ $prov->name }}</option>
                                @endforeach
                            </select>
                         </div>
                         <div>
                            <label class="text-xs text-gray-500 mb-1 block">Kabupaten/Kota</label>
                             <select id="city_select" name="regency_id" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                <option value="">- Pilih Kota -</option>
                                {{-- City selection logic handled by JS, but we need to pre-select if value exists and cities loaded --}}
                                {{-- Ideally we pass city list if regency_id is set. --}}
                                {{-- For now, leave blank and let JS or user re-select if needed, or pass current city name if known? --}}
                                {{-- Or simpler: Just showing ID. --}}
                                @if($alumni->f5a2)
                                     <option value="{{ $alumni->f5a2 }}" selected>{{ $alumni->f5a2 }} (ID)</option>
                                @endif
                            </select>
                         </div>
                    </div>
                </div>

                <!-- f11 Jenis Perusahaan -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f11</span> Jenis Perusahaan/Instansi
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 ml-4">
                        @foreach([
                                1 => 'Instansi pemerintah',
                                2 => 'Organisasi non-profit/Lembaga Swadaya',
                                3 => 'Perusahaan swasta',
                                4 => 'Wiraswasta/perusahaan sendiri',
                                5 => 'BUMN/BUMD',
                                6 => 'Institusi/Organisasi Multilateral',
                                7 => 'Lainnya'
                            ] as $val => $label)
                            <div class="flex items-center">
                                <input type="radio" name="jenis_perusahaan" value="{{ $val }}" {{ (old('jenis_perusahaan', $alumni->f11) == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- f5b Nama Perusahaan -->
                <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        <span class="text-pink-500 font-bold font-mono mr-1">f5b</span> Nama Perusahaan
                    </label>
                    <input type="text" name="nama_perusahaan" value="{{ old('nama_perusahaan', $alumni->f5b) }}" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                 <!-- f5c Posisi (Wiraswasta) -->
                <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        <span class="text-pink-500 font-bold font-mono mr-1">f5c</span> Posisi (Wiraswasta)
                    </label>
                     <select name="posisi_wirausaha" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                        <option value="">- Pilih -</option>
                        @foreach([1 => 'Founder', 2 => 'Co-Founder', 3 => 'Staff', 4 => 'Freelance/Kerja Lepas'] as $val => $label)
                            <option value="{{ $val }}" {{ (old('posisi_wirausaha', $alumni->f5c) == $val) ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                     </select>
                </div>

                 <!-- f5d Tingkat Tempat Kerja -->
                <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        <span class="text-pink-500 font-bold font-mono mr-1">f5d</span> Tingkat Tempat Kerja
                    </label>
                     <select name="tingkat_tempat_kerja" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                        <option value="">- Pilih -</option>
                        @foreach([1 => 'Lokal/wilayah/wiraswasta tidak berbadan hukum', 2 => 'Nasional/wiraswasta berbadan hukum', 3 => 'Multinasional/internasional'] as $val => $label)
                            <option value="{{ $val }}" {{ (old('tingkat_tempat_kerja', $alumni->f5d) == $val) ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                     </select>
                </div>

                <!-- f14 Hubungan Bidang Studi -->
                 <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f14</span> Hubungan Bidang Studi dengan Pekerjaan
                    </label>
                    <div class="flex flex-wrap gap-4 ml-4">
                         @foreach([1 => 'Sangat Erat', 2 => 'Erat', 3 => 'Cukup Erat', 4 => 'Kurang Erat', 5 => 'Tidak Sama Sekali'] as $val => $label)
                            <div class="flex items-center">
                                <input type="radio" name="hubungan_bidang_studi" value="{{ $val }}" {{ (old('hubungan_bidang_studi', $alumni->f14) == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- f15 Tingkat Pendidikan -->
                 <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <span class="text-pink-500 font-bold font-mono mr-1">f15</span> Tingkat Pendidikan yang Sesuai
                    </label>
                    <div class="flex flex-wrap gap-4 ml-4">
                         @foreach([1 => 'Setingkat Lebih Tinggi', 2 => 'Tingkat yang Sama', 3 => 'Setingkat Lebih Rendah', 4 => 'Tidak Perlu Pendidikan Tinggi'] as $val => $label)
                            <div class="flex items-center">
                                <input type="radio" name="tingkat_pendidikan" value="{{ $val }}" {{ (old('tingkat_pendidikan', $alumni->f15) == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

    <!-- 4. Kompetensi (f17) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Kompetensi (f17)</h3>
            <p class="text-xs text-gray-500">A: Dikuasai saat lulus | B: Diperlukan dalam pekerjaan</p>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th rowspan="2" class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-1/3">Kompetensi</th>
                        <th colspan="5" class="px-4 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase bg-blue-50 dark:bg-blue-900/20 border-l border-r border-gray-200 dark:border-gray-600">A (Penguasaan)</th>
                        <th colspan="5" class="px-4 py-1 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase bg-green-50 dark:bg-green-900/20">B (Kebutuhan)</th>
                    </tr>
                    <tr class="text-center text-xs text-gray-400">
                        @for($i=1; $i<=5; $i++) <th class="py-1 border-l border-gray-200 dark:border-gray-600">{{ $i }}</th> @endfor
                        @for($i=1; $i<=5; $i++) <th class="py-1 border-l border-gray-200 dark:border-gray-600">{{ $i }}</th> @endfor
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @php
                        $competencies = [
                            'etika' => ['a'=>'f1701', 'b'=>'f1702', 'label'=>'Etika'],
                            'bidang_ilmu' => ['a'=>'f1703', 'b'=>'f1704', 'label'=>'Keahlian Bidang Ilmu'],
                            'bahasa_inggris' => ['a'=>'f1705', 'b'=>'f1706', 'label'=>'Bahasa Inggris'],
                            'teknologi_info' => ['a'=>'f1707', 'b'=>'f1708', 'label'=>'Teknologi Informasi'],
                            'komunikasi' => ['a'=>'f1709', 'b'=>'f1710', 'label'=>'Komunikasi'],
                            'teamwork' => ['a'=>'f1711', 'b'=>'f1712', 'label'=>'Kerja Sama Tim'],
                            'pengembangan_diri' => ['a'=>'f1713', 'b'=>'f1714', 'label'=>'Pengembangan Diri']
                        ];
                    @endphp
                    @foreach($competencies as $key => $data)
                    <tr>
                        <td class="px-4 py-2 font-medium text-sm text-gray-900 dark:text-white">{{ $data['label'] }}</td>
                        <!-- A -->
                        @for($i=1; $i<=5; $i++)
                        <td class="px-2 py-2 text-center border-l border-gray-100 dark:border-gray-700">
                            <input type="radio" name="{{ $key }}_a" value="{{ $i }}" {{ (old($key.'_a', $alumni->{$data['a']}) == $i) ? 'checked' : '' }} class="h-3 w-3 text-blue-600 focus:ring-blue-500">
                        </td>
                        @endfor
                        <!-- B -->
                        @for($i=1; $i<=5; $i++)
                        <td class="px-2 py-2 text-center border-l border-gray-100 dark:border-gray-700">
                             <input type="radio" name="{{ $key }}_b" value="{{ $i }}" {{ (old($key.'_b', $alumni->{$data['b']}) == $i) ? 'checked' : '' }} class="h-3 w-3 text-green-600 focus:ring-green-500">
                        </td>
                        @endfor
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- 5. Metode Belajar (f2) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Metode Pembelajaran (f2)</h3>
            <p class="text-xs text-gray-500">Penekanan metode pembelajaran di program studi</p>
        </div>
        <div class="p-6">
             <div class="grid grid-cols-1 gap-4">
                 @php
                    $methods = [
                        'perkuliahan' => ['col'=>'f21', 'label'=>'Perkuliahan'],
                        'demonstrasi' => ['col'=>'f22', 'label'=>'Demonstrasi'],
                        'riset' => ['col'=>'f23', 'label'=>'Partisipasi Riset'],
                        'magang' => ['col'=>'f24', 'label'=>'Magang'],
                        'praktikum' => ['col'=>'f25', 'label'=>'Praktikum'],
                        'kerja_lapangan' => ['col'=>'f26', 'label'=>'Kerja Lapangan'],
                        'diskusi' => ['col'=>'f27', 'label'=>'Diskusi']
                    ];
                @endphp
                @foreach($methods as $key => $data)
                <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-700 pb-2 last:border-0">
                    <span class="text-sm text-gray-700 dark:text-gray-300 w-1/3">{{ $data['label'] }}</span>
                    <div class="flex space-x-4">
                        @foreach([1=>'Sangat Besar', 2=>'Besar', 3=>'Cukup', 4=>'Kurang', 5=>'Tidak Sama Sekali'] as $val => $desc)
                            <div class="flex flex-col items-center">
                                <input type="radio" name="{{ $key }}" value="{{ $val }}" {{ (old($key, $alumni->{$data['col']}) == $val) ? 'checked' : '' }} class="h-3 w-3 text-blue-600 mb-1 focus:ring-blue-500">
                                <span class="text-[10px] text-gray-500">{{ $val }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
             </div>
        </div>
    </div>
    
    <!-- 6. Pencarian Kerja (Job Search) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Pencarian Kerja (f3, f4)</h3>
        </div>
        <div class="p-6 space-y-6">
             <!-- f301 Tipe Mencari Kerja -->
             <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <span class="text-pink-500 font-bold font-mono mr-1">f301</span> Kapan anda mulai mencari pekerjaan?
                </label>
                <div class="ml-4 space-y-2">
                    @foreach([
                        1 => 'Saya mencari pekerjaan sebelum lulus',
                        2 => 'Saya mencari pekerjaan sesudah lulus',
                        3 => 'Saya tidak mencari pekerjaan'
                    ] as $val => $label)
                    <div class="flex items-center">
                        <input type="radio" name="tipe_mencari_kerja" value="{{ $val }}" {{ (old('tipe_mencari_kerja', $alumni->f301) == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- f302 / f303 Waktu Mencari -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 ml-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Berapa bulan <strong>SEBELUM</strong> lulus? <span class="text-pink-500 text-xs font-mono">(f302)</span>
                    </label>
                    <div class="flex items-center">
                         <input type="number" name="bulan_sebelum_lulus" value="{{ old('bulan_sebelum_lulus', $alumni->f302) }}" class="w-20 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm">
                        <span class="ml-2 text-sm text-gray-500">Bulan</span>
                    </div>
                 </div>
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Berapa bulan <strong>SESUDAH</strong> lulus? <span class="text-pink-500 text-xs font-mono">(f303)</span>
                    </label>
                     <div class="flex items-center">
                        <input type="number" name="bulan_sesudah_lulus" value="{{ old('bulan_sesudah_lulus', $alumni->f303) }}" class="w-20 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm">
                        <span class="ml-2 text-sm text-gray-500">Bulan</span>
                    </div>
                 </div>
            </div>

            <!-- f4 Job Search Methods -->
             <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <span class="text-pink-500 font-bold font-mono mr-1">f4</span> Bagaimana anda mencari pekerjaan tersebut?
                </label>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-2 ml-4">
                    @php
                        $searchMethods = [
                            1 => 'Melalui iklan di koran/majalah, brosur',
                            2 => 'Melamar ke perusahaan tanpa mengetahui lowongan',
                            3 => 'Pergi ke bursa/pameran kerja',
                            4 => 'Mencari lewat internet/iklan online/milis',
                            5 => 'Dihubungi oleh perusahaan',
                            6 => 'Menghubungi Kemahasiswaan/Alumni',
                            7 => 'Membangun jejaring (network) sejak kuliah',
                            8 => 'Melalui relasi (misal dosen, orang tua, saudara, teman)',
                            9 => 'Membangun bisnis sendiri',
                            10 => 'Melalui penempatan kerja atau magang',
                            11 => 'Bekerja di tempat yang sama dengan tempat dpt kerja',
                            12 => 'Lainnya'
                        ];
                        // Get selected methods checking f401 to f415
                        $selectedMethods = [];
                        foreach ($searchMethods as $key => $label) {
                             $col = 'f4' . str_pad($key, 2, '0', STR_PAD_LEFT);
                             if (($alumni->$col ?? 0) == 1) {
                                 $selectedMethods[] = $key;
                             }
                        }
                    @endphp
                    @foreach($searchMethods as $val => $label)
                    <div class="flex items-center">
                        <input type="checkbox" name="job_search_methods[]" value="{{ $val }}" {{ (in_array($val, old('job_search_methods', $selectedMethods))) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">[{{ $val }}] {{ $label }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer/Action -->
        <div class="flex justify-between items-center bg-gray-50 dark:bg-gray-700/50 px-6 py-4 rounded-lg shadow sticky bottom-0 z-10">
             <a href="{{ route('alumni.index') }}" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">Batal</a>
             <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md shadow transition-colors font-medium"> Simpan Perubahan </button>
        </div>
    </form>

    @push('scripts')
        <script>
            document.getElementById('province_select')?.addEventListener('change', function() {
                const provinceId = this.value;
                const citySelect = document.getElementById('city_select');

                citySelect.innerHTML = '<option value="">Memuat...</option>';

                if (provinceId) {
                    let url = "{{ route('alumni.getCities', ':id') }}";
                    url = url.replace(':id', provinceId);

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            citySelect.innerHTML = '<option value="">- Pilih Kota -</option>';
                            data.forEach(city => {
                                const option = document.createElement('option');
                                option.value = city.id;
                                option.textContent = city.name;
                                citySelect.appendChild(option);
                            });
                        })
                        .catch(err => {
                            citySelect.innerHTML = '<option value="">Gagal memuat</option>';
                            console.error(err);
                        });
                } else {
                     citySelect.innerHTML = '<option value="">- Pilih Kota -</option>';
                }
            });
        </script>
    @endpush
@endsection