<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kuesioner 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.95);
        }
        .card-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 20px 20px 0 0 !important;
            padding: 2rem;
            border: none;
        }
        .question-card {
            background: #f8f9ff;
            border: 1px solid #e3e8ff;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }
        .question-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        .form-check {
            padding: 0.75rem 1rem;
            margin: 0.5rem 0;
            border-radius: 10px;
            transition: all 0.2s ease;
            background: white;
            border: 1px solid #e9ecef;
        }
        .form-check:hover {
            background: #f0f7ff;
            border-color: #4facfe;
        }
        .form-check-input:checked {
            background-color: #4facfe;
            border-color: #4facfe;
        }
        .btn-submit {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 50px;
            padding: 1rem 3rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
        }
        .question-number {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        .saran-section {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            border-radius: 15px;
            padding: 2rem;
        }
        .form-control {
            border-radius: 10px;
            border: 1px solid #e3e8ff;
            padding: 0.75rem 1rem;
            transition: all 0.2s ease;
        }
        .form-control:focus {
            border-color: #4facfe;
            box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.25);
        }
        .form-label {
            color: #495057;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card main-card">
                    <div class="card-header text-white text-center">
                        <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                        <h2 class="mb-0 fw-bold">KUESIONER SURVEI KEPUASAN MASYARAKAT</h2>
                        <p class="mb-0 mt-3 fs-5">Berikan penilaian Anda terhadap kualitas pelayanan yang diterima</p>
                    </div>
                    <div class="card-body p-4">
                        @if ($errors->any())
                            <div class="alert alert-danger border-0 shadow-sm">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>Perhatian!</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('survei.submit') }}" id="surveiForm">
                            @csrf
                            
                            <!-- Data Pelapor -->
                            <div class="question-card" style="background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%); border-color: #28a745;">
                                <div class="d-flex align-items-center mb-4">
                                    <i class="fas fa-user-edit fa-2x text-success me-3"></i>
                                    <h4 class="mb-0 text-success fw-bold">DATA PELAPOR</h4>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="nama_pelapor" class="form-label fw-semibold">Nama Pelapor <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('nama_pelapor') is-invalid @enderror" 
                                               id="nama_pelapor" name="nama_pelapor" 
                                               value="{{ old('nama_pelapor') }}"
                                               placeholder="Nama lengkap pelapor" required>
                                        @error('nama_pelapor')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="no_hp" class="form-label fw-semibold">Nomor HP / WhatsApp <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('no_hp') is-invalid @enderror" 
                                               id="no_hp" name="no_hp" 
                                               value="{{ old('no_hp') }}"
                                               placeholder="08xxxxxxxxxx" required>
                                        @error('no_hp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label fw-semibold">Email</label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                               id="email" name="email" 
                                               value="{{ old('email') }}"
                                               placeholder="email@domain.com">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="alamat" class="form-label fw-semibold">Alamat</label>
                                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                                  id="alamat" name="alamat" rows="2" 
                                                  placeholder="Alamat lengkap (opsional)">{{ old('alamat') }}</textarea>
                                        @error('alamat')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Unsur 1 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">1</div>
                                    <h5 class="mb-0 text-primary fw-bold">Persyaratan Pelayanan</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kesesuaian persyaratan pelayanan dengan jenis pelayanannya?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_1" value="1" id="u1_1">
                                            <label class="form-check-label fw-medium" for="u1_1">Tidak sesuai</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_1" value="2" id="u1_2">
                                            <label class="form-check-label fw-medium" for="u1_2">Kurang sesuai</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_1" value="3" id="u1_3">
                                            <label class="form-check-label fw-medium" for="u1_3">Sesuai</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_1" value="4" id="u1_4">
                                            <label class="form-check-label fw-medium" for="u1_4">Sangat sesuai</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 2 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">2</div>
                                    <h5 class="mb-0 text-primary fw-bold">Sistem, Mekanisme, dan Prosedur</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pemahaman Saudara tentang kemudahan prosedur pelayanan di unit ini?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_2" value="1" id="u2_1">
                                            <label class="form-check-label fw-medium" for="u2_1">Tidak mudah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_2" value="2" id="u2_2">
                                            <label class="form-check-label fw-medium" for="u2_2">Kurang mudah</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_2" value="3" id="u2_3">
                                            <label class="form-check-label fw-medium" for="u2_3">Mudah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_2" value="4" id="u2_4">
                                            <label class="form-check-label fw-medium" for="u2_4">Sangat mudah</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 3 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">3</div>
                                    <h5 class="mb-0 text-primary fw-bold">Waktu Penyelesaian</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kecepatan waktu dalam memberikan pelayanan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_3" value="1" id="u3_1">
                                            <label class="form-check-label fw-medium" for="u3_1">Tidak cepat</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_3" value="2" id="u3_2">
                                            <label class="form-check-label fw-medium" for="u3_2">Kurang cepat</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_3" value="3" id="u3_3">
                                            <label class="form-check-label fw-medium" for="u3_3">Cepat</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_3" value="4" id="u3_4">
                                            <label class="form-check-label fw-medium" for="u3_4">Sangat cepat</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 4 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">4</div>
                                    <h5 class="mb-0 text-primary fw-bold">Biaya/Tarif</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kewajaran biaya/tarif dalam pelayanan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_4" value="1" id="u4_1">
                                            <label class="form-check-label fw-medium" for="u4_1">Sangat mahal</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_4" value="2" id="u4_2">
                                            <label class="form-check-label fw-medium" for="u4_2">Cukup mahal</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_4" value="3" id="u4_3">
                                            <label class="form-check-label fw-medium" for="u4_3">Murah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_4" value="4" id="u4_4">
                                            <label class="form-check-label fw-medium" for="u4_4">Gratis</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 5 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">5</div>
                                    <h5 class="mb-0 text-primary fw-bold">Produk Spesifikasi Jenis Pelayanan</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kesesuaian produk layanan antara yang tercantum dalam standar pelayanan dengan hasil yang diberikan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_5" value="1" id="u5_1">
                                            <label class="form-check-label fw-medium" for="u5_1">Tidak sesuai</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_5" value="2" id="u5_2">
                                            <label class="form-check-label fw-medium" for="u5_2">Kurang sesuai</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_5" value="3" id="u5_3">
                                            <label class="form-check-label fw-medium" for="u5_3">Sesuai</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_5" value="4" id="u5_4">
                                            <label class="form-check-label fw-medium" for="u5_4">Sangat sesuai</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 6 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">6</div>
                                    <h5 class="mb-0 text-primary fw-bold">Kompetensi Pelaksana</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kompetensi/kemampuan petugas dalam memberikan pelayanan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_6" value="1" id="u6_1">
                                            <label class="form-check-label fw-medium" for="u6_1">Tidak kompeten</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_6" value="2" id="u6_2">
                                            <label class="form-check-label fw-medium" for="u6_2">Kurang kompeten</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_6" value="3" id="u6_3">
                                            <label class="form-check-label fw-medium" for="u6_3">Kompeten</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_6" value="4" id="u6_4">
                                            <label class="form-check-label fw-medium" for="u6_4">Sangat kompeten</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 7 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">7</div>
                                    <h5 class="mb-0 text-primary fw-bold">Perilaku Pelaksana</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang perilaku petugas dalam pelayanan terkait kesopanan dan keramahan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_7" value="1" id="u7_1">
                                            <label class="form-check-label fw-medium" for="u7_1">Tidak sopan dan ramah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_7" value="2" id="u7_2">
                                            <label class="form-check-label fw-medium" for="u7_2">Kurang sopan dan ramah</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_7" value="3" id="u7_3">
                                            <label class="form-check-label fw-medium" for="u7_3">Sopan dan ramah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_7" value="4" id="u7_4">
                                            <label class="form-check-label fw-medium" for="u7_4">Sangat sopan dan ramah</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 8 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">8</div>
                                    <h5 class="mb-0 text-primary fw-bold">Transparansi Pelayanan</h5>
                                </div>
                                <p class="fw-semibold mb-4">Apakah pelayanan yang Anda terima mencerminkan transparansi pelayanan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_8" value="1" id="u8_1">
                                            <label class="form-check-label fw-medium" for="u8_1">Tidak transparan</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_8" value="2" id="u8_2">
                                            <label class="form-check-label fw-medium" for="u8_2">Kurang transparan</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_8" value="3" id="u8_3">
                                            <label class="form-check-label fw-medium" for="u8_3">Cukup transparan</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_8" value="4" id="u8_4">
                                            <label class="form-check-label fw-medium" for="u8_4">Sangat transparan</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 9 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">9</div>
                                    <h5 class="mb-0 text-primary fw-bold">Integritas Pelaksana</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang integritas petugas pelayanan (pungli, imbalan, hadiah)?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_9" value="1" id="u9_1">
                                            <label class="form-check-label fw-medium" for="u9_1">Tidak berintegritas</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_9" value="2" id="u9_2">
                                            <label class="form-check-label fw-medium" for="u9_2">Kurang berintegritas</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_9" value="3" id="u9_3">
                                            <label class="form-check-label fw-medium" for="u9_3">Cukup berintegritas</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_9" value="4" id="u9_4">
                                            <label class="form-check-label fw-medium" for="u9_4">Sangat berintegritas</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 10 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">10</div>
                                    <h5 class="mb-0 text-primary fw-bold">Pengelolaan Pengaduan</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang penanganan pengaduan, saran dan masukan dari pengguna layanan?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_10" value="1" id="u10_1">
                                            <label class="form-check-label fw-medium" for="u10_1">Tidak ada</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_10" value="2" id="u10_2">
                                            <label class="form-check-label fw-medium" for="u10_2">Ada tetapi tidak berfungsi</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_10" value="3" id="u10_3">
                                            <label class="form-check-label fw-medium" for="u10_3">Berfungsi kurang maksimal</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_10" value="4" id="u10_4">
                                            <label class="form-check-label fw-medium" for="u10_4">Dikelola dengan baik</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Unsur 11 -->
                            <div class="question-card">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="question-number">11</div>
                                    <h5 class="mb-0 text-primary fw-bold">Sarana dan Prasarana</h5>
                                </div>
                                <p class="fw-semibold mb-4">Bagaimana pendapat Saudara tentang kualitas sarana dan prasarana?</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_11" value="1" id="u11_1">
                                            <label class="form-check-label fw-medium" for="u11_1">Buruk</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_11" value="2" id="u11_2">
                                            <label class="form-check-label fw-medium" for="u11_2">Cukup</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_11" value="3" id="u11_3">
                                            <label class="form-check-label fw-medium" for="u11_3">Baik</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="unsur_11" value="4" id="u11_4">
                                            <label class="form-check-label fw-medium" for="u11_4">Sangat baik</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Saran dan Masukan -->
                            <div class="saran-section">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fas fa-comments fa-2x text-warning me-3"></i>
                                    <h5 class="mb-0 text-dark fw-bold">Saran dan Masukan</h5>
                                </div>
                                <textarea class="form-control border-0 shadow-sm" name="saran" rows="4" placeholder="Bagikan saran dan masukan Anda untuk meningkatkan kualitas pelayanan (opsional)" style="border-radius: 15px; background: rgba(255,255,255,0.9);"></textarea>
                            </div>

                            <div class="text-center mt-5">
                                <button type="submit" class="btn btn-submit btn-lg px-5" id="submitBtn">
                                    <span id="submitText">
                                        <i class="fas fa-paper-plane me-2"></i>
                                        KIRIM SURVEI
                                    </span>
                                    <span id="loadingText" class="d-none">
                                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                                        Mengirim...
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('surveiForm').addEventListener('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            const submitText = document.getElementById('submitText');
            const loadingText = document.getElementById('loadingText');
            
            submitBtn.disabled = true;
            submitText.classList.add('d-none');
            loadingText.classList.remove('d-none');
        });
    </script>
</body>
</html>