<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hasil Survei SKM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .header-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .table th {
            background-color: #2a5298;
            color: white;
            border: none;
            font-weight: 600;
        }
        .table td {
            vertical-align: middle;
            border-color: #dee2e6;
        }
        .badge-responden {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            font-size: 1.1rem;
            font-weight: 600;
        }
        .filter-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-filter {
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            border: none;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
        }
        .btn-filter:hover {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
        }
        .ikm-row {
            background-color: #e3f2fd;
            font-weight: bold;
        }
        .keterangan-badge {
            padding: 0.4rem 0.8rem;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .sangat-baik { background-color: #d4edda; color: #155724; }
        .baik { background-color: #cce5ff; color: #004085; }
        .kurang-baik { background-color: #fff3cd; color: #856404; }
        .tidak-baik { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="mb-2"><i class="fas fa-chart-bar me-3"></i>Hasil Survei</h1>
                
                    <p class="mb-0 fs-5">Pada Tahun {{ $tahun }}</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="badge-responden">
                        <i class="fas fa-users me-2"></i>
                        Total Responden: {{ $totalResponden }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Filter -->
        <div class="filter-card">
            <form method="GET" action="{{ route('survei.hasil') }}">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Filter Semester</label>
                        <select name="semester" class="form-select">
                            <option value="">All Semester</option>
                            <option value="1" {{ request('semester') == '1' ? 'selected' : '' }}>Semester 1</option>
                            <option value="2" {{ request('semester') == '2' ? 'selected' : '' }}>Semester 2</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Filter Tahun</label>
                        <select name="tahun" class="form-select">
                            @foreach($tahunList as $thn)
                                <option value="{{ $thn }}" {{ $tahun == $thn ? 'selected' : '' }}>{{ $thn }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-filter w-100">
                            <i class="fas fa-filter me-2"></i>Filter Data
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Tabel Hasil -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="text-center" width="5%">No</th>
                                <th width="45%">Jenis Survei</th>
                                <th class="text-center" width="15%">Total Skor</th>
                                <th class="text-center" width="15%">Indeks</th>
                                <th class="text-center" width="20%">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($hasilSurvei as $hasil)
                            <tr>
                                <td class="text-center fw-bold">{{ $hasil['no'] }}</td>
                                <td>{{ $hasil['jenis_survei'] }}</td>
                                <td class="text-center">{{ number_format($hasil['total_skor']) }}</td>
                                <td class="text-center fw-bold">{{ $hasil['indeks'] }}</td>
                                <td class="text-center">
                                    <span class="keterangan-badge {{ strtolower(str_replace(' ', '-', $hasil['keterangan'])) }}">
                                        {{ $hasil['keterangan'] }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                            
                            <!-- Baris IKM -->
                            <tr class="ikm-row">
                                <td class="text-center"></td>
                                <td class="fw-bold fs-5">
                                    <i class="fas fa-star text-warning me-2"></i>
                                    INDEKS KEPUASAN MASYARAKAT (IKM)
                                </td>
                                <td class="text-center">-</td>
                                <td class="text-center fw-bold fs-5">{{ number_format($ikm, 2) }}</td>
                                <td class="text-center">
                                    @php
                                        $keteranganIkm = $ikm >= 88.31 ? 'Sangat Baik' : ($ikm >= 76.61 ? 'Baik' : ($ikm >= 65.00 ? 'Kurang Baik' : 'Tidak Baik'));
                                    @endphp
                                    <span class="keterangan-badge {{ strtolower(str_replace(' ', '-', $keteranganIkm)) }}">
                                        {{ $keteranganIkm }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Keterangan -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Keterangan Mutu Pelayanan</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <small class="text-muted">88.31 - 100.00</small><br>
                                <span class="keterangan-badge sangat-baik">Sangat Baik</span>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">76.61 - 88.30</small><br>
                                <span class="keterangan-badge baik">Baik</span>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-6">
                                <small class="text-muted">65.00 - 76.60</small><br>
                                <span class="keterangan-badge kurang-baik">Kurang Baik</span>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">< 65.00</small><br>
                                <span class="keterangan-badge tidak-baik">Tidak Baik</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0"><i class="fas fa-calculator me-2"></i>Rumus Perhitungan</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2"><strong>Indeks per Unsur:</strong></p>
                        <p class="text-muted small mb-3">(Total Skor / (Jumlah Responden × 4)) × 100</p>
                        
                        <p class="mb-2"><strong>IKM Total:</strong></p>
                        <p class="text-muted small mb-0">Rata-rata seluruh indeks unsur</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-4"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>