@extends('layouts.app')

@section('title', 'Detail Responden - Admin SKM')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 style="color: #1e3a8a; font-weight: 700;">
                        <i class="bi bi-person-badge me-2"></i> Detail Responden
                    </h2>
                    <p class="text-muted">Detail informasi responden dan jawaban survei</p>
                </div>
                <a href="{{ route('admin.survei.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-2"></i> Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card card-gov shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i> Informasi Responden
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold text-muted">Nama Pelapor:</div>
                        <div class="col-md-8">{{ $responden->nama_pelapor }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold text-muted">No. HP:</div>
                        <div class="col-md-8">{{ $responden->no_hp }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold text-muted">Email:</div>
                        <div class="col-md-8">{{ $responden->email ?? '-' }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold text-muted">Alamat:</div>
                        <div class="col-md-8">{{ $responden->alamat ?? '-' }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 fw-bold text-muted">Tanggal Survei:</div>
                        <div class="col-md-8">{{ \Carbon\Carbon::parse($responden->tanggal_survei)->format('d F Y') }}</div>
                    </div>
                    @if($responden->saran)
                    <div class="row">
                        <div class="col-md-4 fw-bold text-muted">Saran:</div>
                        <div class="col-md-8">
                            <div class="alert alert-info mb-0">
                                <i class="bi bi-chat-left-text me-2"></i>
                                {{ $responden->saran }}
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <div class="card card-gov shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-clipboard-check me-2"></i> Jawaban Survei
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50px;" class="text-center">No</th>
                                    <th>Unsur Pelayanan</th>
                                    <th style="width: 120px;" class="text-center">Nilai</th>
                                    <th style="width: 150px;" class="text-center">Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($jawaban as $item)
                                <tr>
                                    <td class="text-center fw-bold">{{ $item->unsur_id }}</td>
                                    <td>
                                        <strong>{{ $unsurLabels[$item->unsur_id] }}</strong>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary fs-6">{{ $item->nilai }}</span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $nilaiClass = '';
                                            switch($item->nilai) {
                                                case 1: $nilaiClass = 'danger'; break;
                                                case 2: $nilaiClass = 'warning'; break;
                                                case 3: $nilaiClass = 'info'; break;
                                                case 4: $nilaiClass = 'success'; break;
                                            }
                                        @endphp
                                        <span class="badge bg-{{ $nilaiClass }}">
                                            {{ $nilaiLabels[$item->nilai] }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-3" style="border-left: 4px solid #1e3a8a !important;">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2" style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;">
                        Total Nilai
                    </h6>
                    <h2 class="mb-0" style="color: #1e3a8a; font-weight: 700;">{{ $totalNilai }}</h2>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-3" style="border-left: 4px solid #28a745 !important;">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2" style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;">
                        Rata-rata
                    </h6>
                    <h2 class="mb-0" style="color: #28a745; font-weight: 700;">{{ number_format($rataRata, 2) }}</h2>
                </div>
            </div>

            <div class="card card-gov shadow-sm">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-star-fill me-2"></i> Kategori Kepuasan
                    </h6>
                </div>
                <div class="card-body text-center">
                    @php
                        // Total nilai dalam skala 11-44
                        if ($totalNilai >= 38.83) {
                            $kategori = 'A (Sangat Baik)';
                            $badgeClass = 'success';
                            $icon = 'emoji-smile-fill';
                        } elseif ($totalNilai >= 33) {
                            $kategori = 'B (Baik)';
                            $badgeClass = 'info';
                            $icon = 'emoji-smile';
                        } elseif ($totalNilai >= 28.60) {
                            $kategori = 'C (Kurang Baik)';
                            $badgeClass = 'warning';
                            $icon = 'emoji-neutral';
                        } else {
                            $kategori = 'D (Tidak Baik)';
                            $badgeClass = 'danger';
                            $icon = 'emoji-frown';
                        }
                    @endphp
                    <i class="bi bi-{{ $icon }} text-{{ $badgeClass }}" style="font-size: 4rem;"></i>
                    <h4 class="mt-3 mb-2">
                        <span class="badge bg-{{ $badgeClass }} fs-5">{{ $kategori }}</span>
                    </h4>
                    <p class="text-muted mb-0">Total Skor: {{ number_format($totalNilai, 2) }} / 44</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection