@extends('admin.layout')

@section('title', 'Daftar Aduan Selesai')
@section('page_title', 'Aduan Selesai')
@section('page_subtitle', 'Tinjau kembali sejarah pengaduan masyarakat yang telah diselesaikan oleh pemerintah kecamatan.')

@section('styles')
<style>
    /* Filter Bar */
    .filter-bar {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .search-input-wrapper {
        position: relative;
        flex-grow: 1;
        min-width: 200px;
    }

    .search-input-wrapper svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        width: 16px;
        height: 16px;
    }

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

    .form-input:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    .search-input {
        padding-left: 36px;
        width: 100%;
    }

    select.form-input {
        min-width: 140px;
        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 12px center;
        background-size: 12px;
        padding-right: 32px;
    }

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

    .btn-action {
        background: var(--color-primary);
        color: #fff;
        border: none;
        padding: 10px 18px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-action:hover {
        background: #4f46e5;
    }

    .btn-reset {
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        text-decoration: none;
        border: 1px solid var(--border-glow);
        padding: 9px 16px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 500;
        transition: var(--transition-smooth);
    }

    .btn-reset:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }

    /* Export / Download Buttons */
    .export-group {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-left: auto;
    }

    .btn-export-csv {
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.25);
        color: #6ee7b7;
        padding: 9px 14px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .btn-export-csv:hover {
        background: var(--color-success);
        color: #fff;
        border-color: var(--color-success);
    }

    .btn-export-print {
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.25);
        color: #fcd34d;
        padding: 9px 14px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .btn-export-print:hover {
        background: var(--color-warning);
        color: #fff;
        border-color: var(--color-warning);
    }

    /* Table Styling */
    .table-container {
        width: 100%;
        overflow-x: auto;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-glow);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: 13px;
    }

    th {
        background: var(--bg-surface-elevated);
        color: #fff;
        font-weight: 600;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-glow);
    }

    td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-glow);
        color: var(--text-main);
        vertical-align: middle;
    }

    tr:last-child td {
        border-bottom: none;
    }

    tr:hover td {
        background: rgba(255, 255, 255, 0.01);
    }

    /* Foto Thumbnail */
    .thumb-img {
        width: 64px;
        height: 48px;
        border-radius: 4px;
        object-fit: cover;
        border: 1px solid var(--border-glow);
        transition: var(--transition-smooth);
    }

    .thumb-img:hover {
        transform: scale(1.1);
        border-color: var(--color-primary);
    }

    /* Badges */
    .badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 3px 8px;
        border-radius: 50px;
        display: inline-block;
    }

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

    .badge-selesai { background: rgba(16, 185, 129, 0.1); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.2); }

    .badge-cat {
        background: rgba(99, 102, 241, 0.06);
        border: 1px solid rgba(99, 102, 241, 0.2);
        color: #c7d2fe;
        font-weight: 500;
        font-size: 10px;
        border-radius: 4px;
        padding: 2px 6px;
        display: inline-block;
        margin: 2px;
    }

    /* Action Buttons inside Table */
    .btn-edit {
        background: var(--color-primary-glow);
        border: 1px solid rgba(99, 102, 241, 0.3);
        color: #c7d2fe;
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        text-decoration: none;
        font-size: 12px;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .btn-edit:hover {
        background: var(--color-primary);
        color: #fff;
    }

    .btn-delete {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: var(--color-danger);
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .btn-delete:hover {
        background: var(--color-danger);
        color: #fff;
    }

    /* Laravel Pagination Style overrides for Dark mode */
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24px;
        padding: 0 4px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .pagination-info {
        font-size: 13px;
        color: var(--text-muted);
        font-weight: 500;
    }

    .pagination-wrapper ul.pagination {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 6px;
    }

    .pagination-wrapper li.page-item a,
    .pagination-wrapper li.page-item span {
        background: var(--bg-surface-elevated);
        border: 1px solid var(--border-glow);
        color: var(--text-muted);
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: var(--transition-smooth);
        display: block;
        line-height: 1;
    }

    .pagination-wrapper li.page-item a:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
    }

    .pagination-wrapper li.page-item.active span {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
    }

    .pagination-wrapper li.page-item.disabled span {
        opacity: 0.4;
        cursor: not-allowed;
    }
</style>
@endsection
@section('content')

    <!-- 🔍 FILTER BAR -->
    <form action="{{ route('admin.aduan.selesai') }}" method="GET" class="filter-bar">
        
        <!-- Search Input -->
        <div class="search-input-wrapper">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><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>
            <input type="text" name="search" class="form-input search-input" placeholder="Cari nama pelapor, NIK, atau isi laporan..." value="{{ $filters['search'] ?? '' }}">
        </div>

        <!-- Filter Desa -->
        <select name="desa" class="form-input">
            <option value="">Semua Desa</option>
            @foreach($desaList as $key => $val)
                <option value="{{ $key }}" {{ ($filters['desa'] ?? '') == $key ? 'selected' : '' }}>Desa {{ $val }}</option>
            @endforeach
        </select>

        <!-- Filter Prioritas -->
        <select name="prioritas" class="form-input">
            <option value="">Semua Prioritas</option>
            <option value="penting" {{ ($filters['prioritas'] ?? '') == 'penting' ? 'selected' : '' }}>Penting</option>
            <option value="biasa" {{ ($filters['prioritas'] ?? '') == 'biasa' ? 'selected' : '' }}>Biasa</option>
        </select>

        <!-- Limit Tampilan -->
        <select name="per_page" class="form-input" onchange="this.form.submit()">
            <option value="10" {{ ($filters['per_page'] ?? 10) == 10 ? 'selected' : '' }}>10 Baris</option>
            <option value="50" {{ ($filters['per_page'] ?? 10) == 50 ? 'selected' : '' }}>50 Baris</option>
            <option value="100" {{ ($filters['per_page'] ?? 10) == 100 ? 'selected' : '' }}>100 Baris</option>
        </select>

        <!-- Submit & Reset Buttons -->
        <button type="submit" class="btn-action">
            <span>Terapkan</span>
        </button>

        @if(!empty(array_filter($filters)))
            <a href="{{ route('admin.aduan.selesai') }}" class="btn-reset">Reset</a>
        @endif
    </form>

    {{-- ⬇️ EXPORT / DOWNLOAD BUTTONS --}}
    <div class="export-group" style="margin-bottom:20px; display:flex; gap:8px; justify-content:flex-end;">
        <span style="font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px;">
            <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="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>
            Download Laporan Selesai:
        </span>
        {{-- Download CSV --}}
        <a href="{{ route('admin.aduan.export', array_merge(request()->query(), ['status' => 'selesai'])) }}" class="btn-export-csv" id="btn-download-csv">
            <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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
            Download CSV
        </a>
        {{-- Cetak / PDF --}}
        <a href="{{ route('admin.aduan.export.excel', array_merge(request()->query(), ['status' => 'selesai'])) }}" target="_blank" class="btn-export-print" id="btn-print-laporan">
            <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="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" /></svg>
            Cetak / Simpan PDF
        </a>

    <!-- 📊 DATA TABLE -->
    <div class="glass-card" style="padding: 0; overflow: hidden;">
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th style="width: 80px;">Foto</th>
                        <th style="width: 150px;">Pelapor</th>
                        <th>Isi Pengaduan & Tanggapan Petugas</th>
                        <th style="width: 120px;">Desa</th>
                        <th style="width: 180px;">Kategori ML</th>
                        <th style="width: 80px;">Skor</th>
                        <th style="width: 90px;">Prioritas</th>
                        <th style="width: 90px;">Status</th>
                        <th style="width: 140px; text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($aduans as $aduan)
                        <tr>
                            <!-- Foto -->
                            <td>
                                @if($aduan->foto)
                                    <a href="{{ asset('storage/' . $aduan->foto) }}" target="_blank">
                                        <img src="{{ asset('storage/' . $aduan->foto) }}" class="thumb-img" alt="Bukti">
                                    </a>
                                @else
                                    <div style="width:64px; height:48px; background:rgba(255,255,255,0.02); display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:10px; color:var(--text-muted); border:1px solid var(--border-glow);">
                                        N/A
                                    </div>
                                @endif
                            </td>

                            <!-- Pelapor -->
                            <td>
                                <div style="font-weight:600; color:#fff;">{{ $aduan->nama_pelapor }}</div>
                                <div style="font-size:11px; color:var(--text-muted); margin-top:2px;">{{ $aduan->nik ?? 'Tanpa NIK' }}</div>
                            </td>

                            <!-- Isi Pengaduan & Tanggapan -->
                            <td>
                                <div style="line-height:1.4; font-weight: 500; color: #fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;" title="{{ $aduan->isi_aduan }}">
                                    {{ $aduan->isi_aduan }}
                                </div>
                                
                                @if($aduan->tanggapan)
                                    <div style="margin-top: 10px; background: rgba(16, 185, 129, 0.03); border-left: 2px solid var(--color-success); padding: 8px 12px; border-radius: 0 4px 4px 0; font-size: 12px;" title="{{ $aduan->tanggapan }}">
                                        <span style="font-weight:600; color:#a7f3d0; display:block; margin-bottom:2px;">Respon Resmi Petugas:</span>
                                        <span style="color:var(--text-main); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">{{ $aduan->tanggapan }}</span>
                                    </div>
                                @endif

                                <div style="font-size:11px; color:var(--text-muted); margin-top:8px;">Diselesaikan pada {{ $aduan->updated_at->format('d M Y, H:i') }} WIB</div>
                            </td>

                            <!-- Desa -->
                            <td>
                                <span style="font-weight:500;">{{ $desaList[$aduan->desa] ?? ucfirst($aduan->desa) }}</span>
                            </td>

                            <!-- Kategori ML -->
                            <td>
                                @if($aduan->kategori)
                                    @foreach(explode(', ', $aduan->kategori) as $cat)
                                        <span class="badge-cat">
                                            {{ match(trim($cat)) {
                                                '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 => ucfirst(str_replace('_', ' ', trim($cat)))
                                            } }}
                                        </span>
                                    @endforeach
                                @else
                                    <span style="font-style:italic; color:var(--text-muted); font-size:11px;">Belum Klasifikasi</span>
                                @endif
                            </td>

                            <!-- Confidence Score -->
                            <td>
                                <span style="font-weight:600; color: {{ $aduan->confidence_score >= 80 ? 'var(--color-success)' : ($aduan->confidence_score >= 50 ? 'var(--color-warning)' : 'var(--color-danger)') }};">
                                    {{ $aduan->confidence_score ? round($aduan->confidence_score, 1) . '%' : '-' }}
                                </span>
                            </td>

                            <!-- Prioritas -->
                            <td>
                                <span class="badge badge-{{ $aduan->prioritas }}">{{ $aduan->prioritas }}</span>
                            </td>

                            <!-- Status -->
                            <td>
                                <span class="badge badge-{{ $aduan->status }}">{{ $aduan->status }}</span>
                            </td>

                            <!-- Aksi -->
                            <td style="text-align: center;">
                                <div style="display:flex; gap:6px; justify-content:center;">
                                    <a href="{{ route('admin.aduan.edit', $aduan->id) }}" class="btn-edit" style="background: rgba(255,255,255,0.03); border-color: var(--border-glow); color: #fff;">
                                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.43 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                        Tinjau
                                    </a>
                                    <form action="{{ route('admin.aduan.destroy', $aduan->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus aduan yang sudah selesai ini secara permanen?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-delete">
                                            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style="text-align: center; padding: 50px; color: var(--text-muted);">
                                Belum ada aduan berstatus selesai yang terdaftar.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- 📄 PAGINATION -->
    <div class="pagination-container">
        <div class="pagination-info">
            Menampilkan {{ $aduans->firstItem() ?? 0 }} - {{ $aduans->lastItem() ?? 0 }} dari {{ $aduans->total() }} aduan
        </div>
        <div class="pagination-wrapper">
            {{ $aduans->links('pagination::bootstrap-4') }}
        </div>
    </div>

@endsection
