<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Detail Penilaian Kepuasan #{{ $satisfaction->id }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .logo {
            max-width: 150px;
            margin-bottom: 10px;
        }
        h1 {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .info-section {
            margin-bottom: 20px;
        }
        .info-section h2 {
            font-size: 16px;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        table td, table th {
            padding: 5px;
            vertical-align: top;
            border: 1px solid #ddd;
        }
        table th {
            background-color: #f5f5f5;
            font-weight: bold;
            text-align: left;
        }
        .label {
            font-weight: bold;
            width: 40%;
        }
        .score {
            text-align: center;
            width: 10%;
        }
        .kritik-saran {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #777;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }
        .rating-1 { background-color: #FFD9D9; }
        .rating-2 { background-color: #FFEBD9; }
        .rating-3 { background-color: #F0F0F0; }
        .rating-4 { background-color: #D9EBD9; }
        .rating-5 { background-color: #C6E6C6; }
        .average {
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>PENILAIAN KEPUASAN PELANGGAN #{{ $satisfaction->id }}</h1>
        <p>Dicetak pada: {{ date('d-m-Y H:i:s') }}</p>
    </div>

    <div class="info-section">
        <h2>Informasi Pelanggan</h2>
        <table>
            <tr>
                <td class="label">Nama</td>
                <td>{{ $satisfaction->user->name }}</td>
            </tr>
            <tr>
                <td class="label">Email</td>
                <td>{{ $satisfaction->user->email }}</td>
            </tr>
            <tr>
                <td class="label">Waktu Pengisian</td>
                <td>{{ $satisfaction->created_at->format('d F Y, H:i') }}</td>
            </tr>
        </table>
    </div>

    <div class="average">
        Nilai Rata-rata: {{ number_format($satisfaction->average_score, 1) }}
        @if($satisfaction->average_score >= 4)
            (Sangat Baik)
        @elseif($satisfaction->average_score >= 3)
            (Baik)
        @elseif($satisfaction->average_score >= 2)
            (Cukup)
        @else
            (Kurang)
        @endif
    </div>

    <div class="info-section">
        <h2>Hasil Penilaian</h2>
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Pertanyaan</th>
                    <th>Nilai</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Kesesuaian persyarataran pelayanan dengan jenis pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q1 }}">{{ $satisfaction->q1 }}</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kejelasan persyaratan administrasi yang dibutuhkan</td>
                    <td class="score rating-{{ $satisfaction->q2 }}">{{ $satisfaction->q2 }}</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Kemudahan prosedur mendapatkan pelayanan di unit ini</td>
                    <td class="score rating-{{ $satisfaction->q3 }}">{{ $satisfaction->q3 }}</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Kecepatan waktu dalam memberikan pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q4 }}">{{ $satisfaction->q4 }}</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Ketepatan waktu jam buka pelayanan sesuai standar</td>
                    <td class="score rating-{{ $satisfaction->q5 }}">{{ $satisfaction->q5 }}</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Kewajaran biaya/tarif dalam pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q6 }}">{{ $satisfaction->q6 }}</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Kesesuaian produk hasil pelayanan dengan standar pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q7 }}">{{ $satisfaction->q7 }}</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Kompetensi/kemampuan petugas dalam pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q8 }}">{{ $satisfaction->q8 }}</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Kesopanan dan keramahan petugas dalam memberikan pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q9 }}">{{ $satisfaction->q9 }}</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Kualitas sarana dan prasarana pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q10 }}">{{ $satisfaction->q10 }}</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>Kebersihan dan kenyamanan ruang pelayanan</td>
                    <td class="score rating-{{ $satisfaction->q11 }}">{{ $satisfaction->q11 }}</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>Kebersihan kamar mandi atau toilet</td>
                    <td class="score rating-{{ $satisfaction->q12 }}">{{ $satisfaction->q12 }}</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>Kecukupan luas, kenyamanan dan keamanan tempat parkir</td>
                    <td class="score rating-{{ $satisfaction->q13 }}">{{ $satisfaction->q13 }}</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>Penanganan saran dan pengaduan pengguna layanan</td>
                    <td class="score rating-{{ $satisfaction->q14 }}">{{ $satisfaction->q14 }}</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>Kemudahan akses sarana pengaduan (kotak saran/telepon/email)</td>
                    <td class="score rating-{{ $satisfaction->q15 }}">{{ $satisfaction->q15 }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    @if($satisfaction->kritik_saran)
    <div class="info-section">
        <h2>Kritik dan Saran</h2>
        <div class="kritik-saran">
            {{ $satisfaction->kritik_saran }}
        </div>
    </div>
    @endif

    <div class="footer">
        <p>Dokumen ini diterbitkan secara elektronik dan tidak memerlukan tanda tangan.</p>
        <p>© {{ date('Y') }} UPTD Laboratorium Lingkungan Pada Dinas Lingkungan Hidup Kota Probolinggo - Laporan Penilaian Kepuasan Pelanggan</p>
    </div>
</body>
</html> 