@extends('admin.layout')

@section('title', 'Detail Aduan #' . $aduan->id)
@section('page_title', 'Detail & Proses Aduan')
@section('page_subtitle', 'Tinjau informasi lengkap pengaduan, hasil klasifikasi ML, dan berikan tanggapan resmi.')

@section('styles')
<style>
    /* ── Breadcrumb ── */
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
        font-size: 13px;
        color: var(--text-muted);
    }
    .breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
        transition: var(--transition-smooth);
    }
    .breadcrumb a:hover { color: #fff; }
    .breadcrumb-sep { opacity: 0.4; }

    /* ── Main 2-Column Grid ── */
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 24px;
        align-items: start;
    }

    /* ── Section Title ── */
    .section-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-muted);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .section-title::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background: var(--border-glow);
    }

    /* ── Identity Block ── */
    .identity-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }
    .id-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .id-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--text-muted);
    }
    .id-value {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }

    /* ── Aduan Content Box ── */
    .aduan-box {
        background: var(--bg-base);
        border: 1px solid var(--border-glow);
        border-radius: var(--radius-sm);
        padding: 20px;
        line-height: 1.7;
        font-size: 14px;
        color: #e4e4e7;
        margin-bottom: 24px;
    }

    /* ── Foto Full ── */
    .foto-full {
        width: 100%;
        max-height: 340px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-glow);
        margin-bottom: 24px;
        cursor: zoom-in;
        transition: var(--transition-smooth);
    }
    .foto-full:hover { border-color: var(--color-primary); }

    /* ── ML Result Card ── */
    .ml-result {
        background: rgba(99, 102, 241, 0.04);
        border: 1px solid rgba(99, 102, 241, 0.15);
        border-radius: var(--radius-sm);
        padding: 18px;
        margin-bottom: 24px;
    }
    .ml-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #a5b4fc;
        margin-bottom: 8px;
    }
    .ml-category {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
    }
    .ml-bar-wrap {
        background: rgba(255,255,255,0.06);
        border-radius: 50px;
        height: 8px;
        overflow: hidden;
        margin-bottom: 6px;
    }
    .ml-bar-fill {
        height: 100%;
        border-radius: 50px;
        background: linear-gradient(90deg, var(--color-primary), #818cf8);
        transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ml-score-text {
        font-size: 12px;
        color: var(--text-muted);
    }
    .ml-score-num {
        font-weight: 700;
        color: {{ $aduan->confidence_score >= 80 ? 'var(--color-success)' : ($aduan->confidence_score >= 50 ? 'var(--color-warning)' : 'var(--color-danger)') }};
    }

    /* ── Form Styling ── */
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 8px;
    }
    .form-control {
        width: 100%;
        background: var(--bg-surface-elevated);
        border: 1px solid var(--border-glow);
        border-radius: var(--radius-sm);
        color: #fff;
        padding: 11px 14px;
        font-size: 14px;
        font-family: var(--font-sans);
        transition: var(--transition-smooth);
    }
    .form-control:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }
    textarea.form-control {
        min-height: 130px;
        resize: vertical;
        line-height: 1.6;
    }
    select.form-control {
        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 14px center;
        background-size: 12px;
        padding-right: 36px;
        cursor: pointer;
    }
    select.form-control option {
        background: var(--bg-surface-elevated);
        color: #fff;
    }

    /* ── Radio Buttons / Toggle ── */
    .radio-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .radio-option {
        position: relative;
    }
    .radio-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .radio-label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-glow);
        background: var(--bg-surface-elevated);
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
        transition: var(--transition-smooth);
    }
    .radio-option input[type="radio"]:checked + .radio-label {
        border-color: var(--color-primary);
        background: var(--color-primary-glow);
        color: #fff;
    }
    .radio-label .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .dot-penting { background: var(--color-danger); }
    .dot-biasa { background: var(--text-muted); }

    /* ── Status selector ── */
    .status-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .status-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .status-option {
        position: relative;
    }
    .status-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-glow);
        background: var(--bg-surface-elevated);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        transition: var(--transition-smooth);
        text-align: center;
    }
    .status-label .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .status-option input[type="radio"]:checked + .status-label {
        border-color: var(--color-primary);
        background: var(--color-primary-glow);
        color: #fff;
    }
    .status-option input[value="menunggu"]:checked + .status-label { border-color: var(--color-warning); background: rgba(245, 158, 11, 0.08); color: #fde68a; }
    .status-option input[value="diproses"]:checked + .status-label { border-color: var(--color-info); background: rgba(14, 165, 233, 0.08); color: #bae6fd; }
    .status-option input[value="selesai"]:checked + .status-label { border-color: var(--color-success); background: rgba(16, 185, 129, 0.08); color: #a7f3d0; }

    .dot-menunggu { background: var(--color-warning); }
    .dot-diproses { background: var(--color-info); }
    .dot-selesai { background: var(--color-success); }

    /* ── Action Buttons ── */
    .btn-primary {
        width: 100%;
        background: linear-gradient(135deg, var(--color-primary), #4f46e5);
        border: none;
        color: #fff;
        padding: 13px 20px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--font-display);
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    }
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    }
    .btn-secondary {
        width: 100%;
        background: transparent;
        border: 1px solid var(--border-glow);
        color: var(--text-muted);
        padding: 11px 20px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: var(--transition-smooth);
        text-decoration: none;
        font-family: var(--font-sans);
        margin-top: 10px;
    }
    .btn-secondary:hover { background: rgba(255,255,255,0.04); color: #fff; }

    /* ── Meta Row ── */
    .meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 11px;
        color: var(--text-muted);
        background: var(--bg-base);
        border: 1px solid var(--border-glow);
        border-radius: var(--radius-sm);
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    /* ── Lightbox Overlay ── */
    #lightbox {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.92);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }
    #lightbox.open { display: flex; }
    #lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: var(--radius-md);
        box-shadow: 0 25px 80px rgba(0,0,0,0.8);
    }
    #lightbox-close {
        position: absolute;
        top: 20px;
        right: 24px;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        background: rgba(255,255,255,0.06);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        line-height: 1;
    }
</style>
@endsection

@section('content')

    {{-- ── Breadcrumb ── --}}
    <div class="breadcrumb">
        <a href="{{ route('admin.aduan.index') }}">Aduan Aktif</a>
        <span class="breadcrumb-sep">›</span>
        @if($aduan->status === 'selesai')
            <a href="{{ route('admin.aduan.selesai') }}">Aduan Selesai</a>
            <span class="breadcrumb-sep">›</span>
        @endif
        <span>Detail #{{ $aduan->id }}</span>
    </div>

    <div class="detail-grid">

        {{-- ────────────────────────────────── KOLOM KIRI ── --}}
        <div>

            {{-- Identitas Pelapor --}}
            <div class="glass-card">
                <div class="section-title">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                    Identitas Pelapor
                </div>

                <div class="identity-grid">
                    <div class="id-field" style="grid-column: 1 / -1;">
                        <span class="id-label">Nama Lengkap</span>
                        <span class="id-value" style="font-size:18px; font-family: var(--font-display); font-weight: 700;">{{ $aduan->nama_pelapor }}</span>
                    </div>
                    <div class="id-field">
                        <span class="id-label">NIK</span>
                        <span class="id-value" style="font-family: monospace; letter-spacing: 1px;">{{ $aduan->nik ?? '—' }}</span>
                    </div>
                    <div class="id-field">
                        <span class="id-label">Desa</span>
                        <span class="id-value">{{ $desaList[$aduan->desa] ?? ucfirst($aduan->desa) }}</span>
                    </div>
                    <div class="id-field">
                        <span class="id-label">Kecamatan</span>
                        <span class="id-value">Wonosalam, Demak</span>
                    </div>
                    <div class="id-field">
                        <span class="id-label">Tanggal Masuk</span>
                        <span class="id-value">{{ $aduan->created_at->format('d M Y, H:i') }} WIB</span>
                    </div>
                </div>
            </div>

            {{-- Isi Pengaduan --}}
            <div class="glass-card">
                <div class="section-title">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
                    Isi Pengaduan
                </div>

                <div class="meta-row">
                    <span>ID Aduan: <strong style="color:#fff;">#{{ $aduan->id }}</strong></span>
                    <span>Status saat ini:
                        @php
                            $statusColors = ['menunggu' => '#f59e0b', 'diproses' => '#0ea5e9', 'selesai' => '#10b981'];
                            $statusColor = $statusColors[$aduan->status] ?? '#a1a1aa';
                        @endphp
                        <strong style="color: {{ $statusColor }};">{{ ucfirst($aduan->status) }}</strong>
                    </span>
                </div>

                <div class="aduan-box">
                    {{ $aduan->isi_aduan }}
                </div>

                {{-- Foto Bukti --}}
                @if($aduan->foto)
                    <div class="section-title">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><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.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>
                        Foto Bukti Lapangan
                    </div>
                    <img src="{{ asset('storage/' . $aduan->foto) }}"
                         class="foto-full"
                         alt="Foto Bukti Aduan"
                         onclick="openLightbox(this.src)">
                @endif

                {{-- Tanggapan jika sudah ada --}}
                @if($aduan->tanggapan)
                    <div class="section-title">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" /></svg>
                        Tanggapan Petugas (Tersimpan)
                    </div>
                    <div style="background: rgba(16, 185, 129, 0.04); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: var(--radius-sm); padding: 18px; line-height: 1.7; font-size: 14px; color: #d1fae5;">
                        {{ $aduan->tanggapan }}
                    </div>
                @endif
            </div>

        </div>{{-- end kolom kiri --}}

        {{-- ────────────────────────────────── KOLOM KANAN ── --}}
        <div>

            {{-- ML Prediction Card --}}
            <div class="glass-card">
                <div class="section-title">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1 1 .03 2.798-1.442 2.798H4.24c-1.47 0-2.44-1.798-1.442-2.798L4.2 15.3" /></svg>
                    Klasifikasi ML
                </div>

                @if($aduan->kategori)
                    <div class="ml-result">
                        <div class="ml-label">Kategori Terklasifikasi</div>
                        <div class="ml-category">
                            {{ match($aduan->kategori) {
                                'pelayanan_administrasi' => 'Pelayanan Administrasi',
                                'infrastruktur_fasilitas' => 'Infrastruktur & Fasilitas',
                                'kebersihan_lingkungan' => 'Kebersihan & Lingkungan',
                                'layanan_publik_utilitas' => 'Layanan Publik & Utilitas',
                                'keamanan_ketertiban' => 'Keamanan & Ketertiban',
                                'sosial_kesejahteraan' => 'Sosial & Kesejahteraan',
                                default => ucwords(str_replace('_', ' ', $aduan->kategori))
                            } }}
                        </div>
                        @if($aduan->confidence_score)
                            <div class="ml-bar-wrap">
                                <div class="ml-bar-fill" id="mlBar" style="width: 0%;"></div>
                            </div>
                            <div class="ml-score-text">
                                Tingkat Kepercayaan: <span class="ml-score-num">{{ round($aduan->confidence_score, 1) }}%</span>
                            </div>
                        @endif
                    </div>
                @else
                    <div style="background:rgba(245,158,11,0.05); border:1px solid rgba(245,158,11,0.15); border-radius:var(--radius-sm); padding:16px; font-size:13px; color:#fde68a;">
                        Aduan ini belum diklasifikasikan oleh model ML.
                    </div>
                @endif
            </div>

            {{-- Form Tindak Lanjut --}}
            @if($aduan->status !== 'selesai')
            <div class="glass-card">
                <div class="section-title">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><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>
                    Formulir Tindak Lanjut
                </div>

                <form action="{{ route('admin.aduan.update', $aduan->id) }}" method="POST" id="updateForm">
                    @csrf
                    @method('PUT')

                    {{-- Prioritas --}}
                    <div class="form-group">
                        <label class="form-label">Prioritas Penanganan</label>
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="prioritas_penting" name="prioritas" value="penting" {{ $aduan->prioritas === 'penting' ? 'checked' : '' }}>
                                <label class="radio-label" for="prioritas_penting">
                                    <span class="dot dot-penting"></span>
                                    Penting
                                </label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="prioritas_biasa" name="prioritas" value="biasa" {{ $aduan->prioritas === 'biasa' ? 'checked' : '' }}>
                                <label class="radio-label" for="prioritas_biasa">
                                    <span class="dot dot-biasa"></span>
                                    Biasa
                                </label>
                            </div>
                        </div>
                        @error('prioritas') <span style="color:var(--color-danger); font-size:12px;">{{ $message }}</span> @enderror
                    </div>

                    {{-- Status --}}
                    <div class="form-group">
                        <label class="form-label">Ubah Status Aduan</label>
                        <div class="status-grid">
                            <div class="status-option">
                                <input type="radio" id="status_menunggu" name="status" value="menunggu" {{ $aduan->status === 'menunggu' ? 'checked' : '' }}>
                                <label class="status-label" for="status_menunggu">
                                    <span class="status-dot dot-menunggu"></span>
                                    Menunggu
                                </label>
                            </div>
                            <div class="status-option">
                                <input type="radio" id="status_diproses" name="status" value="diproses" {{ $aduan->status === 'diproses' ? 'checked' : '' }}>
                                <label class="status-label" for="status_diproses">
                                    <span class="status-dot dot-diproses"></span>
                                    Diproses
                                </label>
                            </div>
                            <div class="status-option">
                                <input type="radio" id="status_selesai" name="status" value="selesai" {{ $aduan->status === 'selesai' ? 'checked' : '' }}>
                                <label class="status-label" for="status_selesai">
                                    <span class="status-dot dot-selesai"></span>
                                    Selesai
                                </label>
                            </div>
                        </div>
                        @error('status') <span style="color:var(--color-danger); font-size:12px;">{{ $message }}</span> @enderror
                    </div>

                    {{-- Tanggapan Resmi --}}
                    <div class="form-group">
                        <label class="form-label" for="tanggapan">Tanggapan / Respon Resmi</label>
                        <textarea id="tanggapan" name="tanggapan" class="form-control" placeholder="Tulis tanggapan resmi petugas terhadap pengaduan ini...">{{ old('tanggapan', $aduan->tanggapan) }}</textarea>
                        @error('tanggapan') <span style="color:var(--color-danger); font-size:12px;">{{ $message }}</span> @enderror
                    </div>

                    <button type="submit" class="btn-primary" id="submitBtn">
                        <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="M4.5 12.75l6 6 9-13.5" /></svg>
                        Simpan Perubahan
                    </button>
                </form>
            </div>
            @else
            {{-- Jika sudah selesai, hanya tampil info --}}
            <div class="glass-card">
                <div class="section-title">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><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>
                    Status Pengaduan
                </div>
                <div style="text-align:center; padding: 20px 10px;">
                    <div style="width:56px; height:56px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 14px;">
                        <svg fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24" width="26" height="26"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                    </div>
                    <p style="font-size:15px; font-weight:700; color:#a7f3d0; margin-bottom:6px;">Aduan Telah Diselesaikan</p>
                    <p style="font-size:12px; color:var(--text-muted);">Diselesaikan pada {{ $aduan->updated_at->format('d M Y, H:i') }} WIB</p>
                </div>
            </div>
            @endif

            {{-- Tombol Kembali --}}
            <a href="{{ $aduan->status === 'selesai' ? route('admin.aduan.selesai') : route('admin.aduan.index') }}" class="btn-secondary">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
                Kembali ke Daftar
            </a>

        </div>{{-- end kolom kanan --}}
    </div>

    {{-- ── Lightbox Overlay ── --}}
    <div id="lightbox" onclick="closeLightbox()">
        <span id="lightbox-close">&times;</span>
        <img id="lightbox-img" src="" alt="Foto Bukti">
    </div>

@endsection

@section('scripts')
<script>
    // Animasi ML Bar
    window.addEventListener('load', () => {
        const bar = document.getElementById('mlBar');
        if (bar) {
            const score = {{ $aduan->confidence_score ?? 0 }};
            setTimeout(() => { bar.style.width = score + '%'; }, 300);
        }

        // Form submit feedback
        const form = document.getElementById('updateForm');
        const btn  = document.getElementById('submitBtn');
        if (form && btn) {
            form.addEventListener('submit', () => {
                btn.disabled = true;
                btn.innerHTML = `
                    <svg class="spin-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><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-4.519l3.181 3.182m0-4.991v4.99" /></svg>
                    Menyimpan...
                `;
            });
        }
    });

    // Lightbox
    function openLightbox(src) {
        document.getElementById('lightbox-img').src = src;
        document.getElementById('lightbox').classList.add('open');
    }
    function closeLightbox() {
        document.getElementById('lightbox').classList.remove('open');
    }
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') closeLightbox();
    });
</script>
<style>
    @keyframes spin { to { transform: rotate(360deg); } }
    .spin-icon { animation: spin 0.8s linear infinite; }
</style>
@endsection
