<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SILAPOR Wonosalam - Sistem Layanan Pengaduan Online Rakyat</title>
    <link rel="icon" type="image/png" href="<?php echo e(asset('favicon.png')); ?>">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- CSS Styling -->
    <style>
        :root {
            /* Sleek Dark Palette with Harmonized HSL */
            --bg-base: #09090b;
            --bg-surface: #121214;
            --bg-surface-elevated: #1a1a1e;
            
            --color-primary: #6366f1; /* Indigo */
            --color-primary-glow: rgba(99, 102, 241, 0.15);
            --color-secondary: #ec4899; /* Pink */
            --color-success: #10b981; /* Emerald */
            --color-warning: #f59e0b; /* Amber */
            --color-info: #0ea5e9; /* Sky */
            --color-danger: #ef4444; /* Red */
            
            --text-main: #f4f4f5;
            --text-muted: #a1a1aa;
            --text-inverse: #09090b;
            
            --border-glow: rgba(255, 255, 255, 0.08);
            --border-focus: rgba(99, 102, 241, 0.5);
            
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            
            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
            --font-display: 'Outfit', sans-serif;
        }

        /* Base Resets & Visuals */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-surface-elevated) var(--bg-base);
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: var(--font-sans);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-base);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--bg-surface-elevated);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--color-primary);
        }

        /* Radiant Blur Background Circles */
        .ambient-glow-1 {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(0,0,0,0) 70%);
            top: -100px;
            left: -100px;
            z-index: -1;
            filter: blur(40px);
            pointer-events: none;
        }

        .ambient-glow-2 {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, rgba(0,0,0,0) 70%);
            bottom: 20%;
            right: -150px;
            z-index: -1;
            filter: blur(60px);
            pointer-events: none;
        }

        /* Container Layout */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ============================
           🧭 HEADER SECTION
           ============================ */
        header {
            padding: 24px 0;
            border-bottom: 1px solid var(--border-glow);
            backdrop-filter: blur(12px);
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(9, 9, 11, 0.8);
        }

        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-group {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            object-fit: contain;
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -0.5px;
            background: linear-gradient(to right, #fff, #e4e4e7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-sub {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        nav {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        nav a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition-smooth);
            padding: 8px 12px;
            border-radius: var(--radius-sm);
        }

        nav a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
        }

        .btn-admin {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid var(--border-glow);
            color: #fff;
            padding: 10px 18px;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 13px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition-smooth);
        }

        .btn-admin:hover {
            background: var(--text-main);
            color: var(--text-inverse);
            border-color: var(--text-main);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255,255,255,0.1);
        }

        /* ============================
           🚀 HERO & INTRO
           ============================ */
        .hero {
            padding: 60px 0 40px;
            text-align: center;
            position: relative;
        }

        .hero-tag {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
            border: 1px solid rgba(99, 102, 241, 0.2);
            color: #c7d2fe;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 24px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: 44px;
            font-weight: 800;
            letter-spacing: -1.5px;
            line-height: 1.2;
            margin-bottom: 16px;
            background: linear-gradient(185deg, #fff, #a1a1aa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-desc {
            font-size: 16px;
            color: var(--text-muted);
            max-width: 650px;
            margin: 0 auto 40px;
            font-weight: 400;
        }

        /* ============================
           📊 STATISTICS GRID
           ============================ */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 60px;
        }

        .stat-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-md);
            padding: 24px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            transition: var(--transition-smooth);
            cursor: pointer;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            top: -50px;
            right: -50px;
            filter: blur(20px);
            z-index: 1;
            opacity: 0.15;
            transition: var(--transition-smooth);
        }

        .stat-card.total::before { background: var(--color-primary); }
        .stat-card.waiting::before { background: var(--color-warning); }
        .stat-card.process::before { background: var(--color-info); }
        .stat-card.success::before { background: var(--color-success); }

        .stat-card:hover::before {
            opacity: 0.3;
            transform: scale(1.2);
        }

        .stat-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .stat-val {
            font-family: var(--font-display);
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

        .stat-icon {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: var(--text-muted);
            opacity: 0.2;
            width: 32px;
            height: 32px;
        }

        /* ============================
           📄 MAIN CONTENT LAYOUT
           ============================ */
        .main-layout {
            display: grid;
            grid-template-columns: 7fr 5fr;
            gap: 40px;
            align-items: start;
            margin-bottom: 80px;
        }

        .panel {
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(5px);
        }

        .panel-title {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
        }

        .panel-subtitle {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 28px;
        }

        /* ============================
           ✍️ FORMULIR PENGADUAN
           ============================ */
        .form-group-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 20px;
        }

        .form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .form-group label span.optional {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 400;
        }

        .form-input {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-sm);
            color: #fff;
            padding: 12px 16px;
            font-size: 14px;
            font-family: var(--font-sans);
            transition: var(--transition-smooth);
            width: 100%;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-glow);
        }

        select.form-input {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 16px;
            padding-right: 40px;
        }

        select.form-input option {
            background: var(--bg-surface-elevated);
            color: #fff;
        }

        .form-textarea {
            resize: vertical;
            min-height: 120px;
        }

        /* Foto Uploader Custom */
        .file-upload-zone {
            border: 2px dashed var(--border-glow);
            border-radius: var(--radius-sm);
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            background: rgba(255, 255, 255, 0.01);
            position: relative;
        }

        .file-upload-zone:hover {
            border-color: var(--color-primary);
            background: rgba(99, 102, 241, 0.02);
        }

        .file-upload-icon {
            color: var(--text-muted);
            margin: 0 auto 12px;
            width: 36px;
            height: 36px;
        }

        .file-upload-text {
            font-size: 13px;
            color: var(--text-muted);
        }

        .file-upload-text span {
            color: var(--color-primary);
            font-weight: 600;
        }

        .file-upload-preview {
            display: none;
            margin-top: 12px;
            font-size: 12px;
            color: var(--color-success);
            font-weight: 500;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* Submit Button */
        .btn-submit {
            background: linear-gradient(135deg, var(--color-primary), #4f46e5);
            border: none;
            color: #fff;
            padding: 14px 28px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-smooth);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
            width: 100%;
            margin-top: 10px;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
        }

        /* ============================
           🧠 ACADEMIC ML PROCESS WIDGET
           ============================ */
        .info-sidebar {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .ml-card {
            background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(236,72,153,0.05));
            border: 1px solid rgba(99, 102, 241, 0.15);
        }

        .step-list {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .step-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }

        .step-num {
            width: 24px;
            height: 24px;
            background: var(--color-primary-glow);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #c7d2fe;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .step-content {
            display: flex;
            flex-direction: column;
        }

        .step-title {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .step-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.4;
            margin-top: 2px;
        }

        .cats-badge-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }

        .cat-badge {
            font-size: 11px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-glow);
            color: var(--text-muted);
        }

        /* ============================
           🔍 TRACKING SECTION (NIK SEARCH)
           ============================ */
        .track-section {
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-lg);
            padding: 40px;
            margin-bottom: 60px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        }

        .track-title-wrapper {
            max-width: 600px;
            margin-bottom: 28px;
        }

        .search-nik-form {
            display: flex;
            gap: 12px;
            max-width: 600px;
        }

        .btn-search {
            background: var(--text-main);
            color: var(--text-inverse);
            border: none;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition-smooth);
            flex-shrink: 0;
        }

        .btn-search:hover {
            background: #fff;
            transform: translateY(-2px);
        }

        /* Timeline Riwayat Pengaduan */
        .timeline {
            margin-top: 40px;
            position: relative;
            padding-left: 32px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: var(--bg-surface-elevated);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 40px;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-dot {
            position: absolute;
            left: -32px;
            top: 6px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--bg-surface-elevated);
            border: 3px solid var(--bg-base);
            z-index: 2;
            transition: var(--transition-smooth);
        }

        .timeline-item.active .timeline-dot {
            background: var(--color-primary);
            box-shadow: 0 0 10px var(--color-primary);
        }

        .timeline-card {
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-md);
            padding: 24px;
            display: grid;
            grid-template-columns: 8fr 4fr;
            gap: 20px;
            transition: var(--transition-smooth);
        }

        .timeline-card:hover {
            border-color: rgba(255,255,255,0.12);
        }

        .timeline-header {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
        }

        .timeline-date {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .badge {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 50px;
        }

        .badge.status-menunggu { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
        .badge.status-diproses { background: rgba(14, 165, 233, 0.1); color: var(--color-info); border: 1px solid rgba(14, 165, 233, 0.2); }
        .badge.status-selesai { background: rgba(16, 185, 129, 0.1); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.2); }

        .badge.priority-penting { background: rgba(239, 68, 68, 0.1); color: var(--color-danger); border: 1px solid rgba(239, 68, 68, 0.2); }
        .badge.priority-biasa { background: rgba(161, 161, 170, 0.1); color: var(--text-muted); border: 1px solid rgba(161, 161, 170, 0.2); }

        .timeline-desc {
            font-size: 14px;
            color: var(--text-main);
            margin-bottom: 16px;
            white-space: pre-wrap;
        }

        .timeline-info-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-glow);
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            color: var(--text-muted);
            margin-right: 8px;
            margin-top: 6px;
        }

        .timeline-info-pill strong {
            color: #fff;
            font-weight: 500;
        }

        .timeline-photo {
            width: 100%;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-glow);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.2);
            aspect-ratio: 4/3;
        }

        .timeline-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .timeline-response {
            grid-column: span 2;
            margin-top: 16px;
            background: rgba(99, 102, 241, 0.03);
            border-left: 3px solid var(--color-primary);
            padding: 16px;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }

        .response-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: #c7d2fe;
            margin-bottom: 6px;
        }

        .response-text {
            font-size: 13px;
            color: var(--text-main);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 0;
            color: var(--text-muted);
            font-size: 14px;
        }

        .empty-icon {
            width: 48px;
            height: 48px;
            color: var(--text-muted);
            opacity: 0.3;
            margin: 0 auto 12px;
        }

        /* ============================
           📰 FEED ADUAN TERBARU
           ============================ */
        .feed-section {
            margin-bottom: 80px;
        }

        .feed-header {
            margin-bottom: 28px;
        }

        .feed-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .feed-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-md);
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 220px;
            transition: var(--transition-smooth);
        }

        .feed-card:hover {
            border-color: rgba(255,255,255,0.12);
            transform: translateY(-3px);
        }

        .feed-top {
            margin-bottom: 16px;
        }

        .feed-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .feed-body {
            font-size: 13px;
            color: var(--text-main);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 16px;
        }

        .feed-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border-glow);
            padding-top: 12px;
            font-size: 12px;
        }

        .feed-reporter {
            font-weight: 600;
            color: #fff;
        }

        .feed-desa {
            color: var(--text-muted);
        }

        /* ============================
           🔔 NOTIFIKASI / FEEDBACK
           ============================ */
        .alert-box {
            border-radius: var(--radius-sm);
            padding: 16px 20px;
            margin-bottom: 24px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            line-height: 1.5;
        }

        .alert-success {
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.25);
            color: #a7f3d0;
        }

        .alert-danger {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #fecaca;
        }

        .alert-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* ============================
           FOOTER SECTION
           ============================ */
        footer {
            border-top: 1px solid var(--border-glow);
            padding: 40px 0;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }

        footer strong {
            color: #fff;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .feed-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .feed-grid {
                grid-template-columns: 1fr;
            }
            .timeline-card {
                grid-template-columns: 1fr;
            }
            .timeline-response {
                grid-column: span 1;
            }
            .hero-title {
                font-size: 32px;
            }
            .form-group-row {
                grid-template-columns: 1fr;
                gap: 0;
            }
        }
    </style>
</head>
<body>

    <div class="ambient-glow-1"></div>
    <div class="ambient-glow-2"></div>

    <!-- 🧭 HEADER -->
    <header>
        <div class="container header-wrapper">
            <a href="/" class="logo-group">
                <img src="<?php echo e(asset('logo.png')); ?>" class="logo-icon" alt="SILAPOR Logo">
                <div class="logo-text">
                    <span class="logo-title">SILAPOR</span>
                    <span class="logo-sub">Kec. Wonosalam, Demak</span>
                </div>
            </a>
            <nav>
                <a href="#form-pengaduan">Kirim Aduan</a>
                <a href="#lacak-aduan">Pelacakan NIK</a>
                <a href="/admin" class="btn-admin">
                    <span>Admin Area</span>
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="14" height="14">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                    </svg>
                </a>
            </nav>
        </div>
    </header>

    <!-- 🚀 HERO AREA -->
    <section class="hero">
        <div class="container">
            <span class="hero-tag">Sistem Pengaduan Berbasis Kecerdasan Buatan</span>
            <h1 class="hero-title">Sistem Layanan Pengaduan<br>Online Rakyat (SILAPOR)</h1>
            <p class="hero-desc">Platform pengaduan resmi Kecamatan Wonosalam, Kabupaten Demak, Jawa Tengah. Didukung dengan pemrosesan bahasa alami (NLP) dan kecerdasan buatan berbasis Naive Bayes untuk penanganan yang instan, transparan, dan akurat.</p>
        </div>
    </section>

    <!-- 📊 STATISTICS -->
    <section class="container">
        <div class="stats-grid">
            <div class="stat-card total" onclick="scrollToElement('#aduan-terbaru')">
                <span class="stat-label">Aduan Masuk</span>
                <span class="stat-val"><?php echo e($stats['total']); ?></span>
                <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
            </div>
            <div class="stat-card waiting" onclick="scrollToElement('#aduan-terbaru')">
                <span class="stat-label">Menunggu</span>
                <span class="stat-val"><?php echo e($stats['menunggu']); ?></span>
                <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div class="stat-card process" onclick="scrollToElement('#aduan-terbaru')">
                <span class="stat-label">Diproses</span>
                <span class="stat-val"><?php echo e($stats['diproses']); ?></span>
                <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
            </div>
            <div class="stat-card success" onclick="scrollToElement('#aduan-terbaru')">
                <span class="stat-label">Selesai</span>
                <span class="stat-val"><?php echo e($stats['selesai']); ?></span>
                <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
        </div>
    </section>

    <!-- 📄 MAIN CONTENT GRID (FORM & INFO) -->
    <section class="container main-layout" id="form-pengaduan">
        
        <!-- Left: Form Pengaduan -->
        <div class="panel">
            <div class="panel-title">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="22" height="22" class="text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
                Tulis Aduan Baru
            </div>
            <p class="panel-subtitle">Laporkan masalah Anda secara rahasia dan aman. Sistem akan memproses laporan Anda secara otomatis.</p>

            <!-- Alerts / Feedback -->
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
                <div class="alert-box alert-success">
                    <svg class="alert-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <div><?php echo e(session('success')); ?></div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
                <div class="alert-box alert-danger">
                    <svg class="alert-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
                    <div>
                        <ul style="list-style: none;">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                                <li>• <?php echo e($error); ?></li>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                        </ul>
                    </div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <form action="<?php echo e(route('aduan.store')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>

                <!-- Pelapor & NIK (Grid) -->
                <div class="form-group-row">
                    <div class="form-group">
                        <label for="nama_pelapor">Nama Pelapor</label>
                        <input type="text" name="nama_pelapor" id="nama_pelapor" class="form-input" placeholder="Nama lengkap Anda (Wajib)" value="<?php echo e(old('nama_pelapor')); ?>" required>
                    </div>
                    <div class="form-group">
                        <label for="nik">NIK <span class="optional">(Opsional / Sangat disarankan untuk pelacakan)</span></label>
                        <input type="text" name="nik" id="nik" class="form-input" placeholder="16 digit NIK Anda" maxLength="16" value="<?php echo e(old('nik')); ?>">
                    </div>
                </div>

                <!-- Desa Lokasi Kejadian -->
                <div class="form-group">
                    <label for="desa">Desa Lokasi Kejadian</label>
                    <select name="desa" id="desa" class="form-input" required>
                        <option value="" disabled selected>Pilih Desa Lokasi Kejadian</option>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $desaList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $name): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                            <option value="<?php echo e($key); ?>" <?php echo e(old('desa') == $key ? 'selected' : ''); ?>>Desa <?php echo e($name); ?></option>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                    </select>
                </div>

                <!-- Isi Aduan -->
                <div class="form-group">
                    <label for="isi_aduan">Isi Deskripsi Aduan</label>
                    <textarea name="isi_aduan" id="isi_aduan" class="form-input form-textarea" placeholder="Deskripsikan dengan detail laporan Anda, seperti lokasi spesifik, kronologi kejadian, dan dampak yang ditimbulkan agar kecerdasan buatan dapat memprediksi kategori secara akurat..." required><?php echo e(old('isi_aduan')); ?></textarea>
                </div>

                <!-- Foto Bukti -->
                <div class="form-group">
                    <label>Unggah Foto Bukti Kejadian <span class="optional">(Opsional, Maksimal 5MB)</span></label>
                    <div class="file-upload-zone" onclick="document.getElementById('foto').click()">
                        <input type="file" name="foto" id="foto" style="display: none;" accept="image/*" onchange="previewFileName()">
                        <svg class="file-upload-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /></svg>
                        <div class="file-upload-text">
                            <span>Klik di sini</span> atau Seret Foto Anda untuk di-upload
                        </div>
                        <div class="file-upload-preview" id="upload-preview">
                            <svg fill="currentColor" viewBox="0 0 20 20" width="16" height="16"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                            <span id="preview-filename"></span>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="btn-submit">
                    Kirim Laporan Pengaduan
                    <svg fill="currentColor" viewBox="0 0 20 20" width="16" height="16"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /></svg>
                </button>
            </form>
        </div>

        <!-- Right: Info Panel (ML Process) -->
        <div class="info-sidebar">
            <div class="panel ml-card">
                <div class="panel-title" style="font-size: 18px;">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="20" height="20" class="text-secondary"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.43l-1.003.828c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.43l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.991l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    Sistem Otomasi NLP & Machine Learning
                </div>
                <p class="panel-subtitle" style="margin-bottom: 20px;">Sistem ini diintegrasikan langsung dengan kecerdasan buatan Naive Bayes. Berikut adalah alur pra-pemrosesan teks saat aduan Anda dikirim:</p>

                <div class="step-list">
                    <div class="step-item">
                        <div class="step-num">1</div>
                        <div class="step-content">
                            <span class="step-title">Case Folding & Cleansing</span>
                            <span class="step-desc">Mengubah semua teks aduan menjadi huruf kecil, membersihkan karakter tanda baca, spasi berlebih, dan angka yang tidak berguna.</span>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-num">2</div>
                        <div class="step-content">
                            <span class="step-title">Tokenizing</span>
                            <span class="step-desc">Memotong untaian teks aduan menjadi representasi kata demi kata (token kata tunggal).</span>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-num">3</div>
                        <div class="step-content">
                            <span class="step-title">Indonesian Stopwords Removal</span>
                            <span class="step-desc">Membuang kata-kata penghubung umum yang tidak memiliki nilai bobot klasifikasi (seperti: 'dan', 'di', 'yang', 'adalah').</span>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-num">4</div>
                        <div class="step-content">
                            <span class="step-title">Sastrawi Indonesian Stemming</span>
                            <span class="step-desc">Mengubah kata berimbuhan menjadi bentuk kata dasarnya (misalnya: 'memprihatinkan' diubah menjadi kata dasar 'prihatin').</span>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-num">5</div>
                        <div class="step-content">
                            <span class="step-title">TF-IDF Vectorization & Naive Bayes</span>
                            <span class="step-desc">Menghitung pembobotan nilai TF-IDF dari kata dasar dan mengklasifikasikan kategori aduan menggunakan Multinomial Naive Bayes.</span>
                        </div>
                    </div>
                </div>

                <div class="cats-badge-flex">
                    <div class="cat-badge">Kebersihan & Lingkungan</div>
                    <div class="cat-badge">Infrastruktur & Jalan</div>
                    <div class="cat-badge">Pelayanan Administrasi</div>
                    <div class="cat-badge">Utilitas & Fasilitas Publik</div>
                    <div class="cat-badge">Keamanan & Ketertiban</div>
                    <div class="cat-badge">Sosial & Masyarakat</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 🔍 TRACKING SYSTEM SECTION -->
    <section class="container" id="lacak-aduan">
        <div class="track-section">
            <div class="track-title-wrapper">
                <div class="panel-title" style="font-size: 24px; margin-bottom: 8px;">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="24" height="24" class="text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
                    Pelacakan Aduan Mandiri
                </div>
                <p class="panel-subtitle" style="margin-bottom: 0;">Masukkan 16 digit NIK Anda untuk memantau detail riwayat laporan, prediksi kategori ML, status penanganan, serta tanggapan/respon resmi dari petugas.</p>
            </div>

            <form action="<?php echo e(route('home')); ?>#lacak-aduan" method="GET" class="search-nik-form">
                <input type="text" name="nik" id="search_nik" class="form-input" placeholder="Masukkan 16 digit NIK Anda di sini..." maxLength="16" value="<?php echo e($searchNik); ?>" required>
                <button type="submit" class="btn-search">
                    Lacak Aduan
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /></svg>
                </button>
            </form>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($searchNik): ?>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($searchedAduans && $searchedAduans->count() > 0): ?>
                    <div class="timeline">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $searchedAduans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $aduan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                            <div class="timeline-item active">
                                <div class="timeline-dot"></div>
                                <div class="timeline-card">
                                    
                                    <!-- Detail Aduan -->
                                    <div class="timeline-detail-col">
                                        <div class="timeline-header">
                                            <span class="timeline-date"><?php echo e($aduan->created_at->format('d M Y, H:i')); ?> WIB</span>
                                            
                                            <!-- Status Badge -->
                                            <span class="badge status-<?php echo e($aduan->status); ?>"><?php echo e($aduan->status); ?></span>
                                            
                                            <!-- Priority Badge -->
                                            <span class="badge priority-<?php echo e($aduan->prioritas); ?>"><?php echo e($aduan->prioritas); ?></span>
                                        </div>

                                        <p class="timeline-desc"><?php echo e($aduan->isi_aduan); ?></p>

                                        <div>
                                            <div class="timeline-info-pill">
                                                <span>Desa Kejadian:</span>
                                                <strong><?php echo e($desaList[$aduan->desa] ?? ucfirst($aduan->desa)); ?></strong>
                                            </div>
                                            <div class="timeline-info-pill">
                                                <span>Kategori ML:</span>
                                                <strong style="text-transform: uppercase;"><?php echo e($aduan->kategori); ?></strong>
                                            </div>
                                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($aduan->confidence_score > 0): ?>
                                                <div class="timeline-info-pill">
                                                    <span>Confidence Score:</span>
                                                    <strong style="color: var(--color-success)"><?php echo e(round($aduan->confidence_score, 1)); ?>%</strong>
                                                </div>
                                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                        </div>
                                    </div>

                                    <!-- Foto Bukti (Jika Ada) -->
                                    <div>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($aduan->foto): ?>
                                            <div class="timeline-photo">
                                                <a href="<?php echo e(asset('storage/' . $aduan->foto)); ?>" target="_blank">
                                                    <img src="<?php echo e(asset('storage/' . $aduan->foto)); ?>" alt="Foto Bukti">
                                                </a>
                                            </div>
                                        <?php else: ?>
                                            <div class="timeline-photo" style="background: rgba(255,255,255,0.02); display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted)">
                                                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="24" height="24" style="margin-bottom: 4px; opacity: 0.3"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.008-.9a.75.75 0 110 1.5.75.75 0 010-1.5z" /></svg>
                                                Tanpa Foto Bukti
                                            </div>
                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    </div>

                                    <!-- Tanggapan / Respon Petugas -->
                                    <div class="timeline-response">
                                        <div class="response-header">
                                            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9s-9 3-9 9m9-9l-9 9m9-9a2.25 2.25 0 00-2.25 2.25v1.313M5.25 6h13.5A2.25 2.25 0 0121 8.25v7.5A2.25 2.25 0 0118.75 18H5.25A2.25 2.25 0 013 15.75v-7.5A2.25 2.25 0 015.25 6z" /></svg>
                                            Respon Resmi Petugas Kecamatan Wonosalam
                                        </div>
                                        <p class="response-text">
                                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($aduan->tanggapan): ?>
                                                <?php echo e($aduan->tanggapan); ?>

                                            <?php else: ?>
                                                <span style="font-style: italic; color: var(--text-muted)">Laporan Anda sedang menunggu verifikasi dari petugas kecamatan. Tanggapan resmi akan segera muncul di sini setelah laporan ditinjau.</span>
                                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                        </p>
                                    </div>

                                </div>
                            </div>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                    </div>
                <?php else: ?>
                    <div class="empty-state">
                        <svg class="empty-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
                        <p>Tidak ada riwayat pengaduan yang ditemukan untuk NIK <strong><?php echo e($searchNik); ?></strong>.</p>
                        <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">Pastikan NIK yang Anda masukkan sudah benar dan sesuai dengan NIK saat mengirim pengaduan.</p>
                    </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        </div>
    </section>

    <!-- 📰 FEED ADUAN PUBLIK TERBARU -->
    <section class="container feed-section" id="aduan-terbaru">
        <div class="feed-header">
            <div class="panel-title" style="font-size: 24px; margin-bottom: 8px;">
                <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="24" height="24" class="text-secondary"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-1.5l1.35 1.35m-3.04-1.12a9 9 0 1112.598-9.78m-12.598 9.78l1.35-1.35m0 0l-1.35 1.35z" /></svg>
                Laporan Terkini Masyarakat
            </div>
            <p class="panel-subtitle" style="margin-bottom: 0;">Transparansi informasi pengaduan masyarakat di Kecamatan Wonosalam secara real-time. Informasi pelapor sepenuhnya disamarkan demi privasi keamanan pelapor.</p>
        </div>

        <div class="feed-grid">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($recentAduans && $recentAduans->count() > 0): ?>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $recentAduans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $aduan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                    <div class="feed-card">
                        <div class="feed-top">
                            <div class="feed-meta">
                                <span><?php echo e($aduan->created_at->diffForHumans()); ?></span>
                                <span class="badge status-<?php echo e($aduan->status); ?>"><?php echo e($aduan->status); ?></span>
                            </div>
                            <p class="feed-body"><?php echo e($aduan->isi_aduan); ?></p>
                        </div>
                        <div class="feed-footer">
                            <span class="feed-reporter">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($aduan->nama_pelapor): ?>
                                    
                                    <?php
                                        $len = strlen($aduan->nama_pelapor);
                                        if($len <= 3) {
                                            $masked = $aduan->nama_pelapor[0] . str_repeat('*', $len - 1);
                                        } else {
                                            $masked = substr($aduan->nama_pelapor, 0, 2) . str_repeat('*', $len - 4) . substr($aduan->nama_pelapor, -2);
                                        }
                                    ?>
                                    <?php echo e($masked); ?>

                                <?php else: ?>
                                    Warga Anonim
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </span>
                            <span class="feed-desa">Desa <?php echo e($desaList[$aduan->desa] ?? ucfirst($aduan->desa)); ?></span>
                        </div>
                    </div>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
            <?php else: ?>
                <div class="empty-state" style="grid-column: span 3;">
                    <svg class="empty-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
                    Belum ada pengaduan masyarakat yang terdaftar dalam sistem.
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <p>© 2026 <strong>SILAPOR Wonosalam</strong>. Sistem Layanan Pengaduan Online Rakyat Kecamatan Wonosalam.</p>
            <p style="font-size: 11px; margin-top: 8px; color: var(--text-muted)">Diselenggarakan oleh Kantor Kecamatan Wonosalam, Kabupaten Demak, Jawa Tengah.</p>
        </div>
    </footer>

    <!-- JS Scripts -->
    <script>
        // Smooth scrolling
        function scrollToElement(selector) {
            const el = document.querySelector(selector);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Preview File Name on Upload
        function previewFileName() {
            const fileInput = document.getElementById('foto');
            const previewZone = document.getElementById('upload-preview');
            const filenameSpan = document.getElementById('preview-filename');

            if (fileInput.files.length > 0) {
                filenameSpan.textContent = fileInput.files[0].name;
                previewZone.style.display = 'inline-flex';
            } else {
                previewZone.style.display = 'none';
            }
        }
    </script>
</body>
</html>
<?php /**PATH D:\silapor-ml\resources\views/welcome.blade.php ENDPATH**/ ?>