@extends('layouts.master')

@section('styles')
    <style>
        .kyc-doc-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            transition: all 0.2s ease;
        }
        .kyc-doc-card:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
        }
        .kyc-doc-preview-wrapper {
            position: relative;
            background: #f8fafc;
            min-height: 230px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-bottom: 1px solid #e2e8f0;
        }
        .kyc-doc-img {
            max-height: 250px;
            width: 100%;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .kyc-doc-img:hover {
            transform: scale(1.02);
        }
        .kyc-doc-overlay {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 6px;
        }
        .data-label {
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 600;
            color: #64748b;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }
        .data-value {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
        }
        .badge-kyc-pending {
            background-color: #fef3c7;
            color: #d97706;
            border: 1px solid #fde68a;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 6px;
        }
        .badge-kyc-approved {
            background-color: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 6px;
        }
        .badge-kyc-rejected {
            background-color: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 6px;
        }
        .badge-kyc-unsubmitted {
            background-color: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 6px;
        }
    </style>
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
            <div>
                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('user-management.kyc.index') }}" class="btn btn-sm btn-icon btn-light" title="Kembali ke Daftar KYC">
                        <i class="ri-arrow-left-line"></i>
                    </a>
                    <h1 class="page-title fw-bold fs-18 mb-0">Tinjau Verifikasi KYC: {{ $user->name }}</h1>
                </div>
                <p class="text-muted mb-0 fs-13 ms-4 ps-2">ID Pengguna: #{{ $user->id }} &bull; Terdaftar pada {{ $user->created_at->translatedFormat('d F Y, H:i') }}</p>
            </div>

            <div class="d-flex align-items-center gap-2 flex-wrap">
                <a href="{{ route('user-management.kyc.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="ri-arrow-left-s-line me-1"></i>Kembali
                </a>

                @if($user->status_kyc === 1)
                    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modalApproveKyc">
                        <i class="ri-checkbox-circle-line me-1"></i>Setujui KYC
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#modalRejectKyc">
                        <i class="ri-close-circle-line me-1"></i>Tolak KYC
                    </button>
                @elseif($user->status_kyc === 3)
                    <button type="button" class="btn btn-sm btn-outline-danger" disabled title="Pengajuan telah ditolak. Menunggu pengguna memperbaiki dan mengajukan ulang dokumen dari aplikasi.">
                        <i class="ri-forbid-line me-1"></i>Menunggu Aksi Pengguna (Terkunci)
                    </button>
                @elseif($user->status_kyc === 2)
                    <form action="{{ route('user-management.kyc.reset', $user->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Kembalikan status KYC pengguna ini ke status Menunggu Verifikasi?');">
                        @csrf
                        <input type="hidden" name="status" value="1">
                        <button type="submit" class="btn btn-sm btn-outline-warning">
                            <i class="ri-restart-line me-1"></i>Reset ke Menunggu
                        </button>
                    </form>
                @endif
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-checkbox-circle-line fs-18 me-2"></i>
                <div>{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-error-warning-line fs-18 me-2"></i>
                <div>{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card custom-card mb-3">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="avatar avatar-lg rounded-circle bg-primary-transparent text-primary fw-bold fs-18">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h5 class="fw-bold mb-0 text-dark">{{ $user->name }}</h5>
                                @if($user->status_kyc === 1)
                                    <span class="badge-kyc-pending"><i class="ri-hourglass-2-line me-1"></i>Menunggu Verifikasi</span>
                                @elseif($user->status_kyc === 2)
                                    <span class="badge-kyc-approved"><i class="ri-shield-check-line me-1"></i>Terverifikasi</span>
                                @elseif($user->status_kyc === 3)
                                    <span class="badge-kyc-rejected"><i class="ri-close-circle-line me-1"></i>Ditolak</span>
                                @else
                                    <span class="badge-kyc-unsubmitted"><i class="ri-user-line me-1"></i>Belum Mengajukan</span>
                                @endif

                                @if(isset($nameMatch) && $nameMatch['status'] === 'MATCH')
                                    <span class="badge bg-success-transparent text-success border border-success-subtle px-2 py-1 fs-12">
                                        <i class="ri-checkbox-circle-fill me-1"></i>Rekening Sesuai
                                    </span>
                                @elseif(isset($nameMatch) && $nameMatch['status'] === 'SIMILAR')
                                    <span class="badge bg-warning-transparent text-warning border border-warning-subtle px-2 py-1 fs-12" title="{{ $nameMatch['message'] }}">
                                        <i class="ri-alert-fill me-1"></i>Rekening Mirip ({{ $nameMatch['match_score'] }}%)
                                    </span>
                                @elseif(isset($nameMatch) && $nameMatch['status'] === 'MISMATCH')
                                    <span class="badge bg-danger text-white border px-2 py-1 fs-12 shadow-sm" title="{{ $nameMatch['message'] }}">
                                        <i class="ri-error-warning-fill me-1"></i>Nama Rekening Tidak Sesuai!
                                    </span>
                                @endif
                            </div>
                            <div class="d-flex flex-wrap gap-3 text-muted fs-12">
                                <span><i class="ri-mail-line me-1"></i>{{ $user->email }}</span>
                                <span><i class="ri-phone-line me-1"></i>{{ $user->country_code }}{{ $user->phone }}</span>
                                <span><i class="ri-barcode-line me-1"></i>Referral: <strong class="text-dark">{{ $user->referral_code }}</strong></span>
                                @if($user->kyc_verified_at)
                                    <span><i class="ri-calendar-check-line me-1"></i>Diproses pada: <strong class="text-dark">{{ \Illuminate\Support\Carbon::parse($user->kyc_verified_at)->translatedFormat('d M Y, H:i') }}</strong></span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="badge {{ $steps['card'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['card'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>KTP
                        </span>
                        <span class="badge {{ $steps['face'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['face'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>Selfie
                        </span>
                        <span class="badge {{ $steps['personal'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['personal'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>Data Pribadi
                        </span>
                        <span class="badge {{ $steps['work'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['work'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>Pekerjaan
                        </span>
                        <span class="badge {{ $steps['residence'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['residence'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>Domisili
                        </span>
                        <span class="badge {{ $steps['account'] ? 'bg-success-transparent text-success' : 'bg-light text-muted' }} border px-2 py-1">
                            <i class="{{ $steps['account'] ? 'ri-checkbox-circle-line' : 'ri-close-circle-line' }} me-1"></i>Rekening
                        </span>
                    </div>
                </div>

                @if(isset($nameMatch) && $nameMatch['status'] === 'MISMATCH')
                    <div class="alert alert-danger d-flex align-items-start mt-3 mb-0 shadow-sm border border-danger" role="alert">
                        <i class="ri-error-warning-fill fs-22 text-danger me-3 mt-1 flex-shrink-0"></i>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <h6 class="fw-bold text-danger mb-1 fs-14">
                                    <i class="ri-alert-line me-1"></i>PERINGATAN: Nama Rekening Bank & KTP Tidak Sesuai!
                                </h6>
                                <span class="badge bg-danger text-white fs-11">Potensi Salah Transfer / Fraud</span>
                            </div>
                            <p class="mb-2 fs-13 text-dark">
                                Nama di buku tabungan/rekening berbeda dengan identitas KTP pengguna. Harap pastikan kembali sebelum verifikasi agar tidak keliru saat penarikan dana.
                            </p>
                            <div class="p-2 rounded bg-white border border-danger-subtle d-flex flex-wrap gap-4 fs-12">
                                <div>
                                    <span class="text-muted d-block">Nama di KTP:</span>
                                    <strong class="text-dark fs-13"><i class="ri-id-card-line me-1 text-primary"></i>{{ $nameMatch['ktp_name'] ?: '(Belum diisi)' }}</strong>
                                </div>
                                <div class="border-start ps-3">
                                    <span class="text-muted d-block">Nama Pemilik Rekening ({{ $user->account?->bank_name }}):</span>
                                    <strong class="text-danger fs-13"><i class="ri-bank-card-line me-1"></i>{{ $nameMatch['bank_name'] ?: '(Belum diisi)' }}</strong>
                                </div>
                                <div class="border-start ps-3">
                                    <span class="text-muted d-block">Skor Kemiripan:</span>
                                    <span class="badge bg-danger-transparent text-danger fw-bold fs-12">{{ $nameMatch['match_score'] }}% Cocok</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @elseif(isset($nameMatch) && $nameMatch['status'] === 'SIMILAR')
                    <div class="alert alert-warning-light d-flex align-items-start mt-3 mb-0 border border-warning" role="alert">
                        <i class="ri-alert-fill fs-20 text-warning me-3 mt-1 flex-shrink-0"></i>
                        <div class="flex-grow-1">
                            <h6 class="fw-bold text-warning-emphasis mb-1 fs-14">
                                <i class="ri-information-line me-1"></i>Perhatian: Nama Rekening & KTP Memiliki Sedikit Perbedaan ({{ $nameMatch['match_score'] }}% Cocok)
                            </h6>
                            <p class="mb-2 fs-13 text-muted">
                                Terdapat perbedaan kecil antara nama rekening dengan KTP (kemungkinan singkatan nama, gelar, atau nama tengah).
                            </p>
                            <div class="p-2 rounded bg-white border border-warning-subtle d-flex flex-wrap gap-4 fs-12">
                                <div>
                                    <span class="text-muted d-block">Nama KTP:</span>
                                    <strong class="text-dark">{{ $nameMatch['ktp_name'] }}</strong>
                                </div>
                                <div class="border-start ps-3">
                                    <span class="text-muted d-block">Nama Rekening:</span>
                                    <strong class="text-warning-emphasis">{{ $nameMatch['bank_name'] }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if($user->status_kyc === 3)
                    <div class="alert alert-danger-light d-flex align-items-start mt-3 mb-0" role="alert">
                        <i class="ri-error-warning-fill fs-20 text-danger me-2 mt-1 flex-shrink-0"></i>
                        <div>
                            <strong class="d-block mb-1 text-danger fs-14">Pengajuan KYC Ditolak</strong>
                            @if($user->kyc_notes)
                                <p class="mb-1 fs-13"><strong>Alasan Penolakan:</strong> {{ $user->kyc_notes }}</p>
                            @endif
                            <div class="text-danger-emphasis fs-12 mt-2 pt-2 border-top border-danger-subtle">
                                <i class="ri-shield-keyhole-line me-1"></i>
                                <strong>Status Terkunci:</strong> Pengajuan ini tidak dapat disetujui kembali oleh admin sebelum pengguna memperbaiki data/dokumen dan mengajukan ulang melalui aplikasi.
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="row">

            <div class="col-xl-5 col-lg-5 col-md-12">

                <div class="card custom-card kyc-doc-card mb-3">
                    <div class="card-header justify-content-between py-2 bg-light">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ri-id-card-line text-primary fs-16"></i>
                            <h6 class="card-title fw-bold mb-0 fs-14">Foto KTP (Identitas)</h6>
                        </div>
                        @if($user->file && $user->file->card)
                            <span class="badge bg-success-transparent text-success fs-11"><i class="ri-shield-check-line me-1"></i>Tersedia (Terenkripsi)</span>
                        @else
                            <span class="badge bg-danger-transparent text-danger fs-11"><i class="ri-close-line me-1"></i>Belum Diunggah</span>
                        @endif
                    </div>
                    <div class="card-body p-0">
                        <div class="kyc-doc-preview-wrapper">
                            @if($user->file && $user->file->card)
                                <img src="{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'card']) }}"
                                     alt="Foto KTP {{ $user->name }}"
                                     class="kyc-doc-img"
                                     onclick="openImageLightbox('{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'card']) }}', 'Foto KTP - {{ $user->name }}')"
                                     loading="lazy"
                                     onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'text-center p-4 text-muted\'><i class=\'ri-image-line fs-36 d-block mb-2 text-danger\'></i>Gagal memuat gambar KTP</div>';">
                                <div class="kyc-doc-overlay">
                                    <button type="button" class="btn btn-sm btn-dark bg-opacity-75 text-white" onclick="openImageLightbox('{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'card']) }}', 'Foto KTP - {{ $user->name }}')" title="Perbesar">
                                        <i class="ri-zoom-in-line me-1"></i>Perbesar
                                    </button>
                                    <a href="{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'card']) }}" target="_blank" class="btn btn-sm btn-light" title="Buka Tab Baru">
                                        <i class="ri-external-link-line"></i>
                                    </a>
                                </div>
                            @else
                                <div class="text-center p-4 text-muted">
                                    <i class="ri-file-damage-line fs-36 text-secondary mb-2 d-block"></i>
                                    <p class="mb-0 fs-13">Pengguna belum mengunggah foto kartu identitas (KTP).</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card custom-card kyc-doc-card mb-3">
                    <div class="card-header justify-content-between py-2 bg-light">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ri-user-smile-line text-primary fs-16"></i>
                            <h6 class="card-title fw-bold mb-0 fs-14">Foto Wajah (Selfie)</h6>
                        </div>
                        @if($user->file && $user->file->face)
                            <span class="badge bg-success-transparent text-success fs-11"><i class="ri-shield-check-line me-1"></i>Tersedia (Terenkripsi)</span>
                        @else
                            <span class="badge bg-danger-transparent text-danger fs-11"><i class="ri-close-line me-1"></i>Belum Diunggah</span>
                        @endif
                    </div>
                    <div class="card-body p-0">
                        <div class="kyc-doc-preview-wrapper">
                            @if($user->file && $user->file->face)
                                <img src="{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'face']) }}"
                                     alt="Foto Selfie {{ $user->name }}"
                                     class="kyc-doc-img"
                                     onclick="openImageLightbox('{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'face']) }}', 'Foto Selfie - {{ $user->name }}')"
                                     loading="lazy"
                                     onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'text-center p-4 text-muted\'><i class=\'ri-image-line fs-36 d-block mb-2 text-danger\'></i>Gagal memuat gambar Selfie</div>';">
                                <div class="kyc-doc-overlay">
                                    <button type="button" class="btn btn-sm btn-dark bg-opacity-75 text-white" onclick="openImageLightbox('{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'face']) }}', 'Foto Selfie - {{ $user->name }}')" title="Perbesar">
                                        <i class="ri-zoom-in-line me-1"></i>Perbesar
                                    </button>
                                    <a href="{{ route('user-management.kyc.preview', ['id' => $user->id, 'type' => 'face']) }}" target="_blank" class="btn btn-sm btn-light" title="Buka Tab Baru">
                                        <i class="ri-external-link-line"></i>
                                    </a>
                                </div>
                            @else
                                <div class="text-center p-4 text-muted">
                                    <i class="ri-file-damage-line fs-36 text-secondary mb-2 d-block"></i>
                                    <p class="mb-0 fs-13">Pengguna belum mengunggah foto selfie wajah.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card custom-card bg-light border">
                    <div class="card-body p-3">
                        <h6 class="fw-bold fs-13 mb-2 text-dark"><i class="ri-information-line me-1 text-primary"></i>Panduan Pemeriksaan KYC</h6>
                        <ul class="fs-12 text-muted mb-0 ps-3">
                            <li class="mb-1">Pastikan foto KTP terlihat jelas, tidak buram, dan seluruh sudut KTP tampak.</li>
                            <li class="mb-1">Cocokkan NIK, nama lengkap, dan tempat tanggal lahir pada KTP dengan form data diri.</li>
                            <li class="mb-1">Wajah pada foto selfie harus cocok dan menyerupai wajah di foto kartu identitas.</li>
                            <li>Nama pada rekening bank disarankan sesuai dengan nama pada kartu identitas.</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-xl-7 col-lg-7 col-md-12">

                <div class="card custom-card mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title fw-bold mb-0 fs-14 text-dark">
                            <i class="ri-user-3-line text-primary me-2"></i>1. Identitas Pribadi
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        @if($user->personal)
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="data-label">Nomor Induk Kependudukan (NIK)</div>
                                    <div class="data-value font-monospace text-primary fs-15">{{ $user->personal->nik }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Nama Lengkap (Sesuai KTP)</div>
                                    <div class="data-value">{{ $user->personal->full_name }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Tempat, Tanggal Lahir</div>
                                    <div class="data-value">{{ $user->personal->birth_place }}, {{ $user->personal->birth_date }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Jenis Kelamin</div>
                                    <div class="data-value">{{ $user->personal->gender_label }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Agama</div>
                                    <div class="data-value">{{ $user->personal->religion }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Status Pernikahan</div>
                                    <div class="data-value">{{ $user->personal->married_label }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Nama Gadis Ibu Kandung</div>
                                    <div class="data-value">{{ $user->personal->mothers_maiden_name }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Pendidikan Terakhir</div>
                                    <div class="data-value">{{ $user->personal->educational_background }}</div>
                                </div>
                            </div>
                        @else
                            <div class="text-muted fs-13 fst-italic">Pengguna belum mengisi bagian data identitas pribadi.</div>
                        @endif
                    </div>
                </div>

                <div class="card custom-card mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title fw-bold mb-0 fs-14 text-dark">
                            <i class="ri-money-dollar-circle-line text-success me-2"></i>2. Profil Finansial & Investasi
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        @if($user->personal)
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="data-label">Sumber Dana</div>
                                    <div class="data-value">{{ $user->personal->source_of_funds }}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="data-label">Tingkat Pendapatan</div>
                                    <div class="data-value">{{ $user->personal->income_level }}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="data-label">Tujuan Investasi</div>
                                    <div class="data-value">{{ $user->personal->investment_goals }}</div>
                                </div>
                            </div>
                        @else
                            <div class="text-muted fs-13 fst-italic">Pengguna belum mengisi data profil finansial.</div>
                        @endif
                    </div>
                </div>

                <div class="card custom-card mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title fw-bold mb-0 fs-14 text-dark">
                            <i class="ri-map-pin-line text-warning me-2"></i>3. Alamat Domisili
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        @if($user->residence)
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="data-label">Alamat Lengkap</div>
                                    <div class="data-value">{{ $user->residence->address }}</div>
                                </div>
                                <div class="col-md-3">
                                    <div class="data-label">RT / RW</div>
                                    <div class="data-value">{{ $user->residence->rt }} / {{ $user->residence->rw }}</div>
                                </div>
                                <div class="col-md-5">
                                    <div class="data-label">Kelurahan / Desa</div>
                                    <div class="data-value">{{ $user->residence->sub_district_village }}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="data-label">Kecamatan</div>
                                    <div class="data-value">{{ $user->residence->subdistrict }}</div>
                                </div>
                                <div class="col-md-5">
                                    <div class="data-label">Kota / Kabupaten</div>
                                    <div class="data-value">{{ $user->residence->city }}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="data-label">Provinsi</div>
                                    <div class="data-value">{{ $user->residence->province }}</div>
                                </div>
                                <div class="col-md-3">
                                    <div class="data-label">Kode Pos</div>
                                    <div class="data-value font-monospace">{{ $user->residence->postal_code }}</div>
                                </div>
                            </div>
                        @else
                            <div class="text-muted fs-13 fst-italic">Pengguna belum mengisi alamat tempat tinggal.</div>
                        @endif
                    </div>
                </div>

                <div class="card custom-card mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title fw-bold mb-0 fs-14 text-dark">
                            <i class="ri-briefcase-line text-info me-2"></i>4. Data Pekerjaan
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        @if($user->work)
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="data-label">Profesi / Pekerjaan</div>
                                    <div class="data-value">{{ $user->work->work }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Bidang Usaha</div>
                                    <div class="data-value">{{ $user->work->business_fields }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Jabatan</div>
                                    <div class="data-value">{{ $user->work->position }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Nama Perusahaan / Tempat Bekerja</div>
                                    <div class="data-value">{{ $user->work->work_name }}</div>
                                </div>
                            </div>
                        @else
                            <div class="text-muted fs-13 fst-italic">Pengguna belum mengisi data pekerjaan.</div>
                        @endif
                    </div>
                </div>

                <div class="card custom-card mb-3 {{ isset($nameMatch) && $nameMatch['status'] === 'MISMATCH' ? 'border border-danger' : '' }}">
                    <div class="card-header {{ isset($nameMatch) && $nameMatch['status'] === 'MISMATCH' ? 'bg-danger-transparent' : 'bg-light' }} py-2 d-flex justify-content-between align-items-center">
                        <h6 class="card-title fw-bold mb-0 fs-14 {{ isset($nameMatch) && $nameMatch['status'] === 'MISMATCH' ? 'text-danger' : 'text-dark' }}">
                            <i class="ri-bank-card-line text-purple me-2"></i>5. Rekening Bank
                        </h6>
                        @if(isset($nameMatch))
                            @if($nameMatch['status'] === 'MATCH')
                                <span class="badge bg-success-transparent text-success border border-success-subtle fs-11">
                                    <i class="ri-check-line me-1"></i>Nama Sesuai KTP
                                </span>
                            @elseif($nameMatch['status'] === 'SIMILAR')
                                <span class="badge bg-warning-transparent text-warning border border-warning-subtle fs-11">
                                    <i class="ri-alert-line me-1"></i>Mirip KTP ({{ $nameMatch['match_score'] }}%)
                                </span>
                            @elseif($nameMatch['status'] === 'MISMATCH')
                                <span class="badge bg-danger text-white fs-11">
                                    <i class="ri-close-circle-line me-1"></i>TIDAK SESUAI KTP!
                                </span>
                            @endif
                        @endif
                    </div>
                    <div class="card-body p-3">
                        @if($user->account)
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="data-label">Nama Bank</div>
                                    <div class="data-value fw-semibold">{{ $user->account->bank_name }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Nomor Rekening</div>
                                    <div class="data-value font-monospace text-primary fs-15">{{ $user->account->bank_account }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Nama Pemilik Rekening</div>
                                    <div class="data-value fw-bold fs-14 {{ isset($nameMatch) && $nameMatch['status'] === 'MISMATCH' ? 'text-danger' : 'text-dark' }}">
                                        {{ $user->account->bank_account_name }}
                                    </div>
                                    @if(isset($nameMatch) && $nameMatch['status'] === 'MISMATCH')
                                        <div class="text-danger fs-11 mt-1">
                                            <i class="ri-alert-fill me-1"></i>Beda dengan KTP: <strong>{{ $nameMatch['ktp_name'] }}</strong>
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <div class="data-label">Kantor Cabang</div>
                                    <div class="data-value">{{ $user->account->bank_branch ?: '-' }}</div>
                                </div>
                            </div>

                            @if(isset($nameMatch) && $nameMatch['status'] === 'MISMATCH')
                                <div class="mt-3 p-2 rounded bg-danger-transparent border border-danger-subtle d-flex align-items-center justify-content-between">
                                    <div class="fs-12 text-danger">
                                        <i class="ri-error-warning-fill me-1"></i>
                                        <strong>Peringatan Admin:</strong> Nama rekening bank tidak cocok dengan nama KTP. Pastikan rekening ini benar milik pengguna atau minta unggah ulang rekening yang sesuai.
                                    </div>
                                    @if($user->status_kyc === 1)
                                        <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0 ms-2" data-bs-toggle="modal" data-bs-target="#modalRejectKyc" onclick="setRejectReason('Nama pemilik rekening bank tidak sesuai dengan nama pada identitas KTP.')">
                                            <i class="ri-close-circle-line me-1"></i>Tolak Alasan Rekening Beda
                                        </button>
                                    @elseif($user->status_kyc === 3)
                                        <span class="badge bg-danger text-white flex-shrink-0 ms-2 fs-11"><i class="ri-close-circle-line me-1"></i>Sudah Ditolak</span>
                                    @endif
                                </div>
                            @endif
                        @else
                            <div class="text-muted fs-13 fst-italic">Pengguna belum mengisi informasi rekening bank.</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalApproveKyc" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('user-management.kyc.approve', $user->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold text-success"><i class="ri-checkbox-circle-line me-1"></i>Konfirmasi Setujui KYC</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if(isset($nameMatch) && $nameMatch['status'] === 'MISMATCH')
                            <div class="alert alert-danger d-flex align-items-start mb-3" role="alert">
                                <i class="ri-error-warning-fill fs-20 text-danger me-2 mt-1 flex-shrink-0"></i>
                                <div class="fs-12">
                                    <strong class="d-block mb-1">PERHATIAN: Nama Rekening dan KTP Tidak Sesuai!</strong>
                                    <span>KTP: <strong>{{ $nameMatch['ktp_name'] }}</strong></span><br>
                                    <span>Rekening: <strong>{{ $nameMatch['bank_name'] }}</strong></span>
                                    <p class="mb-0 mt-1 text-danger-emphasis">Menyetujui akun ini dapat menyebabkan kendala atau kegagalan transfer saat penarikan dana.</p>
                                </div>
                            </div>
                        @elseif(isset($nameMatch) && $nameMatch['status'] === 'SIMILAR')
                            <div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
                                <i class="ri-alert-fill fs-20 text-warning me-2 mt-1 flex-shrink-0"></i>
                                <div class="fs-12">
                                    <strong class="d-block mb-1">Catatan Kemiripan Nama ({{ $nameMatch['match_score'] }}% Cocok):</strong>
                                    <span>KTP: {{ $nameMatch['ktp_name'] }} | Rekening: {{ $nameMatch['bank_name'] }}</span>
                                </div>
                            </div>
                        @endif

                        <p class="fs-14 mb-2">Apakah Anda yakin seluruh berkas dan identitas atas nama <strong>{{ $user->name }}</strong> sudah valid dan sesuai ketentuan?</p>
                        <div class="mb-3">
                            <label class="form-label fs-13">Catatan Admin (Opsional):</label>
                            <input type="text" name="notes" class="form-control" placeholder="Contoh: Dokumen KTP dan selfie telah diverifikasi dan valid.">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success"><i class="ri-check-line me-1"></i>Ya, Setujui Sekarang</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalRejectKyc" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('user-management.kyc.reject', $user->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold text-danger"><i class="ri-close-circle-line me-1"></i>Tolak Permohonan KYC</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="fs-14 mb-2">Tolak pengajuan verifikasi KYC untuk <strong>{{ $user->name }}</strong>.</p>
                        
                        <div class="mb-2">
                            <label class="form-label fs-12 text-muted mb-1">Pilih Alasan Cepat:</label>
                            <div class="d-flex flex-wrap gap-1 mb-2">
                                <button type="button" class="btn btn-xs btn-outline-danger" onclick="setRejectReason('Nama pemilik rekening bank tidak sesuai dengan nama pada identitas KTP.')">
                                    <i class="ri-bank-card-line me-1"></i>Nama Rekening Beda
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setRejectReason('Foto KTP buram atau tidak terbaca dengan jelas. Mohon unggah ulang foto KTP yang lebih terang dan jelas.')">
                                    <i class="ri-id-card-line me-1"></i>KTP Buram
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setRejectReason('Foto selfie tidak jelas atau wajah terpotong. Mohon ambil foto selfie ulang di ruangan yang cukup terang.')">
                                    <i class="ri-user-smile-line me-1"></i>Selfie Buram
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setRejectReason('Nomor Induk Kependudukan (NIK) tidak sesuai dengan foto fisik KTP.')">
                                    <i class="ri-error-warning-line me-1"></i>NIK Tidak Cocok
                                </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fs-13 fw-semibold">Alasan Penolakan <span class="text-danger">*</span></label>
                            <textarea id="kyc-reject-reason" name="reason" class="form-control" rows="3" placeholder="Sebutkan alasan penolakan, misalnya: Nama rekening bank tidak sesuai dengan KTP..." required>{{ old('reason', $user->kyc_notes) }}</textarea>
                            <div class="form-text fs-11">Alasan penolakan akan membantu pengguna mengetahui bagian mana yang perlu diperbaiki saat mengunggah ulang.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger"><i class="ri-close-circle-line me-1"></i>Konfirmasi Tolak</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalImageLightbox" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-dark text-white border-0">
                <div class="modal-header border-bottom-0 py-2">
                    <h6 class="modal-title fs-14 fw-semibold text-white" id="lightbox-title">Pratinjau Dokumen</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-2 d-flex align-items-center justify-content-center" style="min-height: 480px;">
                    <img src="" id="lightbox-img" alt="Zoom Dokumen" class="img-fluid rounded" style="max-height: 80vh; object-fit: contain;">
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        function openImageLightbox(imgUrl, title) {
            document.getElementById('lightbox-img').src = imgUrl;
            document.getElementById('lightbox-title').innerText = title;
            const modal = new bootstrap.Modal(document.getElementById('modalImageLightbox'));
            modal.show();
        }

        function setRejectReason(reasonText) {
            const textarea = document.getElementById('kyc-reject-reason');
            if (textarea) {
                textarea.value = reasonText;
                textarea.focus();
            }
        }
    </script>
@endsection