@extends('public.layouts.public')

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

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

    <div class="text-center space-y-3">
        <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
            Survei Pelacakan Alumni
        </span>
        <h2 class="text-3xl font-extrabold text-white">Kuesioner Tracer Study</h2>
        <p class="text-sm text-slate-400 max-w-2xl mx-auto">
            Mohon kesediaan Bapak/Ibu/Saudara alumni Universitas Cenderawasih untuk mengisi kuesioner ini guna pengembangan mutu lulusan dan akreditasi universitas.
        </p>
    </div>

    @if (session('success'))
        <div class="p-6 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 font-semibold text-center space-y-2">
            <div class="w-10 h-10 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold mx-auto text-lg">✓</div>
            <p>{{ session('success') }}</p>
        </div>
    @endif

    @if ($errors->any())
        <div class="p-4 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-400 text-sm font-medium">
            {{ $errors->first() }}
        </div>
    @endif

    <form action="{{ route('public.simpanTracer') }}" method="POST" class="space-y-6">
        @csrf

        <!-- Identification Block -->
        <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4">
            <h3 class="text-lg font-bold text-white border-b border-slate-800 pb-3">Identitas Alumni</h3>
            
            <div>
                <label for="nim_alumni" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
                    NIM / Nomor Alumni <span class="text-rose-400">*</span>
                </label>
                <input type="text" id="nim_alumni" name="nim_alumni" value="{{ old('nim_alumni') }}" required placeholder="Masukkan NIM Anda (Contoh: 20181011016004 atau 77339)" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
            </div>
        </div>

        <!-- Questionnaire Questions -->
        <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-6">
            <h3 class="text-lg font-bold text-white border-b border-slate-800 pb-3">Pertanyaan Kuesioner</h3>

            @forelse ($kuesioner as $index => $q)
                <div class="space-y-3 p-4 rounded-2xl bg-slate-950 border border-slate-800/80">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-mono font-bold text-indigo-400">Pertanyaan #{{ $index + 1 }}</span>
                        <span class="text-[10px] uppercase font-bold px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ $q->kategori }}</span>
                    </div>

                    <label class="block text-sm font-bold text-white">
                        {{ $q->teks_pertanyaan }}
                        @if ($q->is_wajib)
                            <span class="text-rose-400">*</span>
                        @endif
                    </label>

                    @if ($q->tipe_jawaban == 'radio')
                        <div class="space-y-2 pt-2">
                            @foreach ($q->opsiJawaban as $opt)
                                <label class="flex items-center gap-3 p-3 rounded-xl bg-slate-900 hover:bg-slate-850 cursor-pointer border border-slate-800 transition-all">
                                    <input type="radio" name="jawaban[{{ $q->id_kuesioner }}]" value="{{ $opt->id_opsi }}" {{ $q->is_wajib ? 'required' : '' }} class="w-4 h-4 text-indigo-600 bg-slate-950 border-slate-700">
                                    <span class="text-sm text-slate-200">{{ $opt->teks_opsi }}</span>
                                </label>
                            @endforeach
                        </div>
                    @elseif ($q->tipe_jawaban == 'text')
                        <textarea name="jawaban[{{ $q->id_kuesioner }}]" rows="3" {{ $q->is_wajib ? 'required' : '' }} placeholder="Tuliskan jawaban atau masukan Anda di sini..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all"></textarea>
                    @else
                        <input type="text" name="jawaban[{{ $q->id_kuesioner }}]" {{ $q->is_wajib ? 'required' : '' }} placeholder="Masukkan jawaban..." class="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-sm transition-all">
                    @endif
                </div>
            @empty
                <div class="text-center py-6 text-slate-500">Belum ada pertanyaan kuesioner aktif.</div>
            @endforelse
        </div>

        <button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-extrabold text-base transition-all shadow-xl shadow-indigo-600/30">
            Kirimkan Kuesioner Tracer Study
        </button>
    </form>

</div>
@endsection