@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 mb-2">Data Respon Survey</h1>
            <p class="text-slate-600">Lihat semua respon yang telah dikumpulkan</p>
        </div>
        <a href="{{ route('export.form') }}" 
           class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors duration-200">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            Export Data
        </a>
    </div>

    <!-- Responses List -->
    <div class="space-y-4">
        @forelse ($responses as $response)
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-full text-sm font-medium mr-3">
                                {{ $loop->iteration }}
                            </span>
                            <h3 class="text-lg font-semibold text-slate-900">{{ $response->survey->title }}</h3>
                        </div>
                        <p class="text-slate-600 text-sm">
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            {{ \Carbon\Carbon::parse($response->filled_at)->format('d M Y H:i') }}
                        </p>
                    </div>
                </div>

                @php
                    $answers = $response->answers ?? [];
                    if (is_string($answers)) {
                        $answers = json_decode($answers, true) ?? [];
                    }
                @endphp

                @if (is_array($answers) && count($answers) > 0)
                    <div class="space-y-3">
                        @foreach ($answers as $questionId => $answer)
                            @php
                                $question = \App\Models\Question::find($questionId);
                            @endphp
                            <div class="bg-slate-50 rounded-lg p-4">
                                <h4 class="font-medium text-slate-900 mb-2">
                                    {{ $question->question_text ?? 'Pertanyaan ID '.$questionId }}
                                </h4>
                                <div class="text-slate-700">
                                    @if (is_array($answer))
                                        <div class="flex flex-wrap gap-2">
                                            @foreach ($answer as $item)
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    {{ $item }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-slate-700">{{ $answer }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <p class="mt-2 text-sm text-slate-500">Tidak ada jawaban</p>
                    </div>
                @endif
            </div>
        @empty
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-slate-900">Belum ada data respon</h3>
                <p class="mt-1 text-sm text-slate-500">Mulai dengan mengisi survey untuk melihat respon di sini.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection