@extends('admin.layout')

@section('title', 'Laporan Data Pengguna Alumni')

@section('content')
    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
                Laporan Data Pengguna Alumni - Detail
            </h2>
            <a href="{{ route('laporan.pengguna-alumni.index') }}"
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                Kembali
            </a>
        </div>


        <!-- Identitas Pengisi -->
        <div class="card mb-6">
            <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">Identitas Pengisi</h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nama Pengisi</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->nama_pengisi }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Jabatan</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->jabatan }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Instansi</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->instansi }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Alamat</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->alamat }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Kota</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->kota }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">No. HP/WA</label>
                    <div class="md:col-span-2">
                        <input type="text" value="{{ $data->phone }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                    <div class="md:col-span-2">
                        <input type="email" value="{{ $data->email }}" readonly
                            class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">
                    </div>
                </div>
            </div>
        </div>

        <!-- Petunjuk -->
        <div
            class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-lg text-sm text-justify">
            <strong>Petunjuk Pengisian:</strong> Sesuai dengan aspek penilaian, berilah penilaian secara jujur, objektif,
            dan penuh tanggung jawab terhadap kinerja alumni program studi UM Jember yang bekerja pada Instansi/Perusahaan
            yang saudara pimpin. Penilaian yang diberikan akan dipergunakan dalam proses perbaikan sistem pembalajaran di
            Program Studi di UM Jember dan tidak akan berpengaruh terhadap pandangan kami terhadap Instansi/Perusahaan
            Saudara. Penilaian dilakukan terhadap aspek - aspek berikut dengan cara mencontreng ( V ) pada kolom Tanggapan
            Pihak Pengguna. Terimakasih atas kerjasamanya
        </div>

        <!-- Table Penilaian -->
        <div class="w-full overflow-hidden rounded-lg shadow-xs mb-6">
            <div class="w-full overflow-x-auto">
                <table class="w-full whitespace-no-wrap border dark:border-gray-700">
                    <thead>
                        <tr class="bg-gray-50 dark:bg-gray-800 border-b dark:border-gray-700">
                            <th rowspan="2"
                                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-10">
                                No</th>
                            <th rowspan="2"
                                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                Jenis Kemampuan</th>
                            <th colspan="4"
                                class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                Tanggapan Pihak Pengguna
                            </th>
                        </tr>
                        <tr class="bg-gray-50 dark:bg-gray-800 border-b dark:border-gray-700">
                            <th
                                class="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase border-r dark:border-gray-700">
                                Sangat Baik <span class="text-red-500 font-bold">[4]</span></th>
                            <th
                                class="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase border-r dark:border-gray-700">
                                Baik <span class="text-red-500 font-bold">[3]</span></th>
                            <th
                                class="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase border-r dark:border-gray-700">
                                Cukup <span class="text-red-500 font-bold">[2]</span></th>
                            <th class="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase">Kurang <span
                                    class="text-red-500 font-bold">[1]</span></th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                        <!-- Etika Header -->
                        <tr class="bg-gray-100 dark:bg-gray-750">
                            <td colspan="6" class="px-4 py-2 text-sm font-bold text-gray-700 dark:text-gray-300">Etika</td>
                        </tr>
                        @foreach($etika as $index => $soal)
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3 text-sm text-center">{{ $index + 1 }}</td>
                                <td class="px-4 py-3 text-sm">{{ $soal->label }}</td>
                                @for($i = 4; $i >= 1; $i--)
                                    <td class="px-4 py-3 text-center border-l dark:border-gray-700">
                                        <input type="radio" disabled {{ ($soal->skor == $i) ? 'checked' : '' }}
                                            class="text-blue-600 form-radio focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:focus:shadow-outline-gray h-4 w-4">
                                    </td>
                                @endfor
                            </tr>
                        @endforeach

                        <!-- Perilaku Header -->
                        <tr class="bg-gray-100 dark:bg-gray-750">
                            <td colspan="6" class="px-4 py-2 text-sm font-bold text-gray-700 dark:text-gray-300">Perilaku
                            </td>
                        </tr>
                        @foreach($perilaku as $index => $soal)
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3 text-sm text-center">{{ $index + 1 }}</td>
                                <td class="px-4 py-3 text-sm">{{ $soal->label }}</td>
                                @for($i = 4; $i >= 1; $i--)
                                    <td class="px-4 py-3 text-center border-l dark:border-gray-700">
                                        <input type="radio" disabled {{ ($soal->skor == $i) ? 'checked' : '' }}
                                            class="text-blue-600 form-radio focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:focus:shadow-outline-gray h-4 w-4">
                                    </td>
                                @endfor
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Catatan & TTD -->
        <div class="grid grid-cols-1 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Catatan tambahan (saran dan
                    harapan) terhadap alumni yang bersangkutan :</label>
                <textarea rows="3" readonly
                    class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm sm:text-sm bg-gray-50">{{ $data->catatan }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanda Tangan Digital
                    :</label>
                @if($data->tanda_tangan_digital)
                    <div class="border p-2 inline-block rounded bg-white">
                        <img src="{{ asset('assets/dist/upload_ttd/' . $data->tanda_tangan_digital) }}"
                            alt="Tanda Tangan Digital" class="h-24">
                    </div>
                @else
                    <span class="text-gray-500 italic">Tidak ada tanda tangan.</span>
                @endif
            </div>
        </div>

        <!-- Footer Actions -->
        <div class="mt-8 flex justify-end">
            <a href="{{ route('laporan.pengguna-alumni.cetak', $data->id) }}" target="_blank"
                class="px-4 py-2 text-sm font-medium text-white bg-cyan-600 border border-transparent rounded-md hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                    </path>
                </svg>
                Print Dokumen
            </a>
        </div>

    </div>
@endsection