{{-- Survey Info Card --}}
<div class="card mb-3">
    <div class="card-body">
        <h5 class="mb-3">Detail Survey</h5>
        <h6 class="text-dark mb-3">{{ $survey->judul_form }} - {{ $survey->subjudul }}</h6>
        <div class="mb-0">
            <p class="text-muted mb-0" style="line-height: 1.6;">
                {!! $survey->deskripsi ?? 'Survey ini bertujuan untuk mengumpulkan feedback dan masukan dari Anda.' !!}
            </p>
        </div>
    </div>
</div>

{{-- Respondent Info Card --}}
<div class="card mb-3">
    <div class="card-body">
        <h5 class="mb-3">Informasi Responden</h5>
        <div class="row">
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">Nama:</small>
                <strong>{{ $respondent->nama }}</strong>
            </div>
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">NIK:</small>
                <strong>{{ $respondent->id }}</strong>
            </div>
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">Email:</small>
                <strong>{{ $respondent->email }}</strong>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">Departemen:</small>
                <strong>{{ $respondent->dept_name ?? $respondent->departemen }}</strong>
            </div>
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">Jabatan:</small>
                <strong>{{ $respondent->jabatan }}</strong>
            </div>
            <div class="col-md-4 mb-2">
                <small class="text-muted d-block">Waktu Submit:</small>
                <strong>{{ $response->waktu_submit ? \Carbon\Carbon::parse($response->waktu_submit)->format('d M Y H:i') : '-' }}</strong>
            </div>
        </div>
    </div>
</div>

{{-- Answers Header Card --}}
<div class="card mb-3">
    <div class="card-body">
        <h5 class="mb-0">Jawaban Survey</h5>
    </div>
</div>

{{-- Each Answer in Separate Card --}}
@foreach($answers as $answer)
    <div class="card mb-3">
        <div class="card-body">
            {{-- Question Header --}}
            <div class="d-flex justify-content-between align-items-start mb-3">
                <h6 class="text-dark mb-0">
                    Pertanyaan {{ $answer['number'] }}
                    @if($answer['required'])
                        <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                    @endif
                </h6>
                <span class="badge bg-info">
                    {{ ucfirst(str_replace('_', ' ', $answer['jenis'])) }}
                </span>
            </div>

            <hr class="horizontal dark mt-0 mb-3">

            {{-- Question Text --}}
            <div class="mb-3">
                <label class="form-label fw-bold">Soal:</label>
                <div class="p-2 bg-light rounded" style="min-height: 50px;">
                    {!! $answer['soal'] !!}
                </div>
            </div>

            {{-- Answer Display --}}
            <div class="answer-section">
                <label class="form-label fw-bold">Jawaban:</label>
                
                @if($answer['jenis'] === 'text')
                    <div class="p-2 bg-light rounded" style="min-height: 60px;">
                        {{ $answer['answer'] }}
                    </div>
                
                @elseif($answer['jenis'] === 'linear_scale')
                    <div class="mb-2">
                        @if($answer['scale_data'])
                            <div class="d-flex justify-content-center align-items-center">
                                @for($i = 1; $i <= 5; $i++)
                                    <button type="button" class="btn btn-lg me-2 {{ $answer['answer'] == $i ? 'btn-info' : 'btn-outline-secondary' }}" disabled>
                                        {{ $i }}
                                    </button>
                                @endfor
                            </div>
                            @if(isset($answer['scale_data']->kata_negatif) && isset($answer['scale_data']->kata_positif))
                                <div class="mt-3 text-center">
                                    <small class="text-muted">
                                        <strong>Peview: </strong>
                                        1: Sangat {{ $answer['scale_data']->kata_negatif }} |
                                        2: {{ $answer['scale_data']->kata_negatif }} |
                                        3: Sedang |
                                        4: {{ $answer['scale_data']->kata_positif }} |
                                        5: Sangat {{ $answer['scale_data']->kata_positif }}
                                    </small>
                                </div>
                            @endif
                        @else
                            <div class="alert alert-secondary mb-0">Data scale tidak tersedia</div>
                        @endif
                    </div>
                
                @elseif($answer['jenis'] === 'checkbox')
                    <div class="mb-2">
                        @if(count($answer['selected']) > 0)
                            @foreach($answer['options'] as $option)
                                <div class="d-flex align-items-center mb-2">
                                    <input type="checkbox" class="form-check-input me-2" 
                                           {{ in_array($option->id, $answer['selected']) ? 'checked' : '' }} disabled>
                                    <span class="{{ in_array($option->id, $answer['selected']) ? 'fw-bold' : '' }}">
                                        {{ $option->kalimat_pilihan }}
                                    </span>
                                </div>
                            @endforeach
                        @else
                            <div class="alert alert-secondary mb-0">Tidak ada pilihan yang dipilih</div>
                        @endif
                    </div>
                
                @elseif($answer['jenis'] === 'pilihan_text')
                    <div class="mb-2">
                        @foreach($answer['options'] as $option)
                            <div class="d-flex align-items-center mb-2">
                                <input type="radio" class="form-check-input me-2" 
                                       {{ $answer['selected_option'] == $option->id ? 'checked' : '' }} disabled>
                                <span class="{{ $answer['selected_option'] == $option->id ? 'fw-bold' : '' }}">
                                    {{ $option->kalimat_pilihan }}
                                </span>
                            </div>
                        @endforeach
                        
                        <div class="border-top pt-3 mt-3">
                            <label class="form-label fw-bold">Alasan:</label>
                            <div class="p-2 bg-light rounded" style="min-height: 60px;">
                                {{ $answer['alasan'] ?? 'Tidak ada alasan yang diberikan' }}
                            </div>
                        </div>
                    </div>
                
                @elseif($answer['jenis'] === 'group_linear_scale')
                    <div class="mb-2">
                        @if(isset($answer['vendors']) && count($answer['vendors']) > 0)
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="min-width: 200px;">Pertanyaan</th>
                                            @foreach($answer['vendors'] as $vendor)
                                                <th class="text-center" style="min-width: 150px;">
                                                    {{ $vendor->label }}
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($answer['questions'] as $q)
                                            <tr>
                                                <td>
                                                    <strong>{{ $q->label }}</strong>
                                                    @if($q->nama_label)
                                                        <br>
                                                        <small class="text-muted">
                                                            <i class="fas fa-tag"></i> {{ $q->nama_label }}
                                                        </small>
                                                    @endif
                                                    @if($q->kata_positif && $q->kata_negatif)
                                                        <br>
                                                        <p class="text-muted" style="font-size: 0.75rem;">
                                                            1: Sangat {{ $q->kata_negatif }} | 
                                                            2: {{ $q->kata_negatif }} | 
                                                            3: Sedang | 
                                                            4: {{ $q->kata_positif }} | 
                                                            5: Sangat {{ $q->kata_positif }}
                                                        </p>
                                                    @endif
                                                </td>
                                                @foreach($answer['vendors'] as $vendor)
                                                    <td class="text-center">
                                                        @php
                                                            $jawaban = null;
                                                            if(isset($answer['answers'][$vendor->id]) && isset($answer['answers'][$vendor->id][$q->id])) {
                                                                $jawaban = $answer['answers'][$vendor->id][$q->id];
                                                            }
                                                        @endphp
                                                        
                                                        @if($jawaban)
                                                            <strong>{{ $jawaban->jawaban }}</strong>
                                                        @else
                                                            <strong>-</strong>
                                                        @endif
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="alert alert-secondary mb-0">Tidak ada data group linear scale</div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
@endforeach