@extends('admin.layout')

@section('page-title', 'Laporan Data Wisuda')
@section('page-subtitle', 'Detail Hasil Pengisian Tracer Study Wisuda')

@section('content')
    <div class="space-y-6">
        <!-- 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 Wisuda <span class="ml-2 text-xs font-mono text-pink-500 font-bold">f1</span>
                </h3>
                 <a href="{{ route('wisuda.index') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>  
                </a>
            </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-500 dark:text-gray-400">NIM</label>
                    <div class="text-gray-900 dark:text-white font-semibold">{{ $wisuda->nim }}</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Kode PT</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->kode_pt }} - Universitas Muhammadiyah Jember</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Tahun Lulus</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->tahun_lulus }}</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Kode Prodi</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->prodi_name }}</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Nama Alumni</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->name }}</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Nomor Telepon/HP</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->phone }}</div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->email }}</div>
                </div>
                 <div class="space-y-1">
                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">NIK</label>
                    <div class="text-gray-900 dark:text-white">{{ $wisuda->nik ?? '-' }}</div>
                </div>

            </div>
        </div>

        @php
            $emp = $wisuda->employmentInfos?->first();
            $comp = $wisuda->competences?->first();
            $learn = $wisuda->learningMethods?->first();
            $jobSearch = $wisuda->jobSearches?->first();
        @endphp

        <!-- 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>
                            <span class="text-xs text-gray-500">Provinsi</span>
                            <div class="p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-200">
                                {{ $emp?->province_name ?? '-' }}
                            </div>
                         </div>
                         <div>
                            <span class="text-xs text-gray-500">Kabupaten/Kota</span>
                            <div class="p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-200">
                                {{ $emp?->regency_name ?? '-' }}
                            </div>
                         </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" disabled {{ ($emp?->jenis_perusahaan == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                                    <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>
                    <div class="mt-1 p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white">
                        {{ $emp?->nama_perusahaan ?? '-' }}
                    </div>
                </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>
                     <div class="mt-1 p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white">
                        @php
                            $posisi = [1 => 'Founder', 2 => 'Co-Founder', 3 => 'Staff', 4 => 'Freelance/Kerja Lepas'];
                        @endphp
                        {{ $posisi[$emp?->posisi_wirausaha] ?? '-' }}
                    </div>
                </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>
                     <div class="mt-1 p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white">
                        @php
                            $tingkat = [1 => 'Lokal/wilayah/wiraswasta tidak berbadan hukum', 2 => 'Nasional/wiraswasta berbadan hukum', 3 => 'Multinasional/internasional'];
                        @endphp
                        {{ $tingkat[$emp?->tingkat_tempat_kerja] ?? '-' }}
                    </div>
                </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" disabled {{ ($emp?->hubungan_bidang_studi == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                                <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" disabled {{ ($emp?->tingkat_pendidikan == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                                <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' => 'Etika',
                                'bidang_ilmu' => 'Keahlian Bidang Ilmu',
                                'bahasa_inggris' => 'Bahasa Inggris',
                                'teknologi_info' => 'Teknologi Informasi',
                                'komunikasi' => 'Komunikasi',
                                'teamwork' => 'Kerja Sama Tim',
                                'pengembangan_diri' => 'Pengembangan Diri'
                            ];
                        @endphp
                        @foreach($competencies as $key => $label)
                            <tr>
                                <td class="px-4 py-2 font-medium text-sm text-gray-900 dark:text-white">{{ $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" disabled {{ ($comp->{$key . '_a'} ?? 0) == $i ? 'checked' : '' }} class="h-3 w-3 text-blue-600">
                                    </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" disabled {{ ($comp->{$key . '_b'} ?? 0) == $i ? 'checked' : '' }} class="h-3 w-3 text-green-600">
                                    </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' => 'Perkuliahan',
                            'demonstrasi' => 'Demonstrasi',
                            'riset' => 'Partisipasi Riset',
                            'magang' => 'Magang',
                            'praktikum' => 'Praktikum',
                            'kerja_lapangan' => 'Kerja Lapangan',
                            'diskusi' => 'Diskusi'
                        ];
                    @endphp
                    @foreach($methods as $key => $label)
                        <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">{{ $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" disabled {{ ($learn?->$key == $val) ? 'checked' : '' }} class="h-3 w-3 text-blue-600 mb-1">
                                        <span class="text-[10px] text-gray-500">{{ $val }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                 </div>
                 <div class="mt-4 flex justify-between text-xs text-gray-400 px-4">
                     <span>1: Sangat Besar</span>
                     <span>5: Tidak Sama Sekali</span>
                 </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" disabled {{ ($jobSearch?->tipe_mencari_kerja == $val) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300">
                        <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">
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white font-mono">
                            {{ $jobSearch?->bulan_sebelum_lulus ?? '-' }}
                        </span>
                        <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">
                        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white font-mono">
                            {{ $jobSearch?->bulan_sesudah_lulus ?? '-' }}
                        </span>
                        <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 as array of codes
                        $selectedMethods = $wisuda->jobSearchMethods?->pluck('metode')?->toArray() ?? [];
                    @endphp
                    @foreach($searchMethods as $val => $label)
                    <div class="flex items-center">
                        <input type="checkbox" disabled {{ in_array($val, $selectedMethods) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                        <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">
             <a href="{{ route('wisuda.index') }}" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">Kembali ke Daftar</a>
             <a href="{{ route('wisuda.edit', $wisuda->IDValueAlumni) }}" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md shadow transition-colors font-medium"> Edit Data Alumni </a>
        </div>

    </div>
@endsection