@extends('layouts.sales')

@section('title', 'Pencairan Komisi')

@section('content')

{{-- ── PAGE HEADER ──────────────────────────────────────── --}}
<div class="mb-5">
    <h1 class="page-title">Pencairan Komisi</h1>
    <p class="page-subtitle">Kelola dan ajukan pencairan komisi Anda</p>
</div>

{{-- ── SALDO BANNER ─────────────────────────────────────── --}}
<div class="mb-4">
    <div style="background: linear-gradient(135deg, var(--primary) 0%, #065F46 100%); border-radius: 20px; padding: 1.8rem 2rem; box-shadow: 0 8px 30px rgba(5,150,105,0.2);">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <div style="color:rgba(255,255,255,0.7); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.4rem;">
                    Saldo Komisi Tersedia
                </div>
                <div class="money-display" style="color:white; font-size:2.2rem; font-weight:800; letter-spacing:-1px; line-height:1.1;">
                    Rp {{ number_format($availableCommission, 0, ',', '.') }}
                </div>
                <div style="color:rgba(255,255,255,0.65); font-size:0.83rem; margin-top:0.5rem;">
                    Min. penarikan: <strong style="color:white;">Rp {{ number_format($minWithdraw, 0, ',', '.') }}</strong>
                    &nbsp;·&nbsp;
                    Fee: <strong style="color:white;">Rp {{ number_format($withdrawFee, 0, ',', '.') }}</strong>
                </div>
            </div>
            @if($availableCommission >= $minWithdraw)
                <button class="btn" style="background:white; color:var(--primary); font-weight:700; padding:0.75rem 1.6rem; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.12); flex-shrink:0;"
                        data-bs-toggle="modal" data-bs-target="#withdrawModal">
                    <i class="bi bi-arrow-up-circle-fill me-2"></i>Ajukan Pencairan
                </button>
            @else
                <button class="btn" style="background:rgba(255,255,255,0.25); color:white; font-weight:700; padding:0.75rem 1.6rem; border-radius:12px; flex-shrink:0; cursor:not-allowed;" disabled>
                    <i class="bi bi-lock-fill me-2"></i>Saldo Belum Cukup
                </button>
            @endif
        </div>
    </div>
</div>

{{-- Warning if below minimum --}}
@if($availableCommission < $minWithdraw)
<div class="alert alert-warning d-flex align-items-start gap-2 mb-4">
    <i class="bi bi-exclamation-triangle-fill mt-1" style="font-size:1.1rem; flex-shrink:0;"></i>
    <div>
        <strong>Belum mencapai batas minimum!</strong>
        <div class="small mt-1">
            Saldo Anda <strong>Rp {{ number_format($availableCommission, 0, ',', '.') }}</strong>
            — masih kurang <strong>Rp {{ number_format($minWithdraw - $availableCommission, 0, ',', '.') }}</strong>
            untuk mencapai minimum penarikan.
        </div>
    </div>
</div>
@endif

{{-- ── RIWAYAT PENCAIRAN ────────────────────────────────── --}}
<div class="card">
    <div class="card-header">
        <i class="bi bi-clock-history me-2" style="color:var(--primary);"></i>
        Riwayat Pencairan
    </div>

    {{-- Desktop Table --}}
    <div class="table-responsive d-none d-lg-block">
        <table class="table">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th class="text-end">Request</th>
                    <th class="text-end">Fee</th>
                    <th class="text-end">Diterima</th>
                    <th>Status</th>
                    <th class="text-end">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($withdrawals as $w)
                    @php
                        $badgeClass = $w->status === 'approved' ? 'badge-success'
                                    : ($w->status === 'pending' ? 'badge-warning' : 'badge-danger');
                        $badgeText  = $w->status === 'approved' ? 'Disetujui'
                                    : ($w->status === 'pending' ? 'Pending' : 'Ditolak');
                    @endphp
                    <tr>
                        <td>
                            <div class="fw-semibold" style="font-size:0.92rem;">{{ $w->date->format('d M Y') }}</div>
                            <div class="text-muted small">{{ $w->date->format('H:i') }}</div>
                        </td>
                        <td class="text-end">
                            <div class="money-display" style="font-size:0.93rem; font-weight:600;">
                                Rp {{ number_format($w->amount, 0, ',', '.') }}
                            </div>
                        </td>
                        <td class="text-end">
                            <div class="text-muted" style="font-size:0.88rem;">
                                Rp {{ number_format($w->admin_fee, 0, ',', '.') }}
                            </div>
                        </td>
                        <td class="text-end">
                            <div class="money-display" style="font-size:0.93rem; font-weight:600; color:var(--primary);">
                                Rp {{ number_format($w->received_amount, 0, ',', '.') }}
                            </div>
                        </td>
                        <td><span class="badge {{ $badgeClass }}">{{ $badgeText }}</span></td>
                        <td class="text-end">
                            @if($w->status === 'approved')
                                <button class="btn btn-sm btn-outline-primary view-proof-btn"
                                        data-amount="{{ $w->amount }}"
                                        data-admin-percentage="{{ $w->admin_percentage }}"
                                        data-admin-fee="{{ $w->admin_fee }}"
                                        data-received="{{ $w->received_amount }}"
                                        data-date="{{ $w->date->format('d F Y, H:i') }}"
                                        data-proof="{{ $w->proof_url ?? '' }}"
                                        data-bs-toggle="modal" data-bs-target="#proofModal">
                                    <i class="bi bi-receipt me-1"></i>Bukti
                                </button>
                            @elseif($w->status === 'rejected')
                                <button class="btn btn-sm btn-outline-primary view-reject-btn"
                                        style="border-color:var(--danger); color:var(--danger);"
                                        data-amount="{{ $w->amount }}"
                                        data-notes="{{ $w->notes ?? '-' }}"
                                        data-date="{{ $w->date->format('d F Y, H:i') }}"
                                        data-bs-toggle="modal" data-bs-target="#rejectReasonModal">
                                    <i class="bi bi-info-circle me-1"></i>Alasan
                                </button>
                            @else
                                <button class="btn btn-sm" style="background:#FEF3C7; color:#92400E; font-weight:600;" disabled>
                                    <i class="bi bi-clock me-1"></i>Pending
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">
                            <div class="text-center py-5 text-muted">
                                <i class="bi bi-inbox d-block mb-2" style="font-size:2rem;"></i>
                                Belum ada riwayat pencairan
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile Cards --}}
    <div class="d-lg-none p-3">
        <div class="d-flex flex-column gap-3">
            @forelse($withdrawals as $w)
                @php
                    $isApproved = $w->status === 'approved';
                    $isPending  = $w->status === 'pending';
                    $isRejected = $w->status === 'rejected';
                    $stripColor = $isApproved ? 'linear-gradient(90deg,var(--primary),#10B981)'
                                : ($isPending ? 'linear-gradient(90deg,var(--accent),#FCD34D)'
                                : 'linear-gradient(90deg,var(--danger),#F87171)');
                    $badgeClass = $isApproved ? 'badge-success' : ($isPending ? 'badge-warning' : 'badge-danger');
                    $badgeText  = $isApproved ? 'Disetujui' : ($isPending ? 'Pending' : 'Ditolak');
                @endphp
                <div style="border:1.5px solid var(--border); border-radius:16px; overflow:hidden; background:white;">
                    <div style="height:3px; background:{{ $stripColor }};"></div>
                    <div class="p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div class="fw-semibold" style="font-size:0.9rem;">{{ $w->date->format('d M Y') }}</div>
                                <div class="text-muted small">{{ $w->date->format('H:i') }} WIB</div>
                            </div>
                            <span class="badge {{ $badgeClass }}">{{ $badgeText }}</span>
                        </div>

                        <div class="mb-3">
                            <div class="text-muted" style="font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Request Amount</div>
                            <div class="money-display" style="font-size:1.4rem; font-weight:800; color: {{ $isRejected ? 'var(--danger)' : 'var(--dark)' }};">
                                Rp {{ number_format($w->amount, 0, ',', '.') }}
                            </div>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <div style="background:var(--light); border-radius:10px; padding:0.6rem 0.8rem;">
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;">Fee</div>
                                    <div class="fw-semibold" style="font-size:0.88rem;">Rp {{ number_format($w->admin_fee, 0, ',', '.') }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div style="background:#F0FDF4; border-radius:10px; padding:0.6rem 0.8rem;">
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;">Diterima</div>
                                    <div class="money-display fw-bold" style="font-size:0.88rem; color:var(--primary);">
                                        Rp {{ number_format($w->received_amount, 0, ',', '.') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($isApproved)
                            <button class="btn btn-outline-primary btn-sm w-100 view-proof-btn"
                                    data-amount="{{ $w->amount }}"
                                    data-admin-percentage="{{ $w->admin_percentage }}"
                                    data-admin-fee="{{ $w->admin_fee }}"
                                    data-received="{{ $w->received_amount }}"
                                    data-date="{{ $w->date->format('d F Y, H:i') }}"
                                    data-proof="{{ $w->proof_url ?? '' }}"
                                    data-bs-toggle="modal" data-bs-target="#proofModal">
                                <i class="bi bi-receipt me-1"></i>Lihat Bukti Transfer
                            </button>
                        @elseif($isRejected)
                            <button class="btn btn-sm w-100 view-reject-btn"
                                    style="background:#FEE2E2; color:var(--danger); font-weight:700; border-radius:10px;"
                                    data-amount="{{ $w->amount }}"
                                    data-notes="{{ $w->notes ?? '-' }}"
                                    data-date="{{ $w->date->format('d F Y, H:i') }}"
                                    data-bs-toggle="modal" data-bs-target="#rejectReasonModal">
                                <i class="bi bi-info-circle me-1"></i>Lihat Alasan Penolakan
                            </button>
                        @else
                            <div class="text-center py-1" style="font-size:0.83rem; color:#92400E; font-weight:600;">
                                <i class="bi bi-clock me-1"></i>Menunggu persetujuan admin
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-inbox d-block mb-2" style="font-size:2rem;"></i>
                    Belum ada riwayat pencairan
                </div>
            @endforelse
        </div>
    </div>

    {{-- Pagination --}}
    <div style="padding: 1rem 1.5rem; border-top: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem;">
        <div class="text-muted" style="font-size:0.83rem;">
            @if($withdrawals->total() > 0)
                Menampilkan {{ ($withdrawals->currentPage() - 1) * $withdrawals->perPage() + 1 }}–{{ min($withdrawals->currentPage() * $withdrawals->perPage(), $withdrawals->total()) }}
                dari {{ $withdrawals->total() }} pencairan
            @else
                Belum ada pencairan
            @endif
        </div>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                <li class="page-item {{ $withdrawals->onFirstPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $withdrawals->appends(request()->query())->previousPageUrl() ?? '#' }}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                @foreach($withdrawals->getUrlRange(1, $withdrawals->lastPage()) as $page => $url)
                    @if($page == $withdrawals->currentPage())
                        <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                    @elseif($page == 1 || $page == $withdrawals->lastPage() || ($page >= $withdrawals->currentPage() - 1 && $page <= $withdrawals->currentPage() + 1))
                        <li class="page-item"><a class="page-link" href="{{ $withdrawals->appends(request()->query())->url($page) }}">{{ $page }}</a></li>
                    @elseif($page == $withdrawals->currentPage() - 2 || $page == $withdrawals->currentPage() + 2)
                        <li class="page-item disabled"><span class="page-link">…</span></li>
                    @endif
                @endforeach
                <li class="page-item {{ !$withdrawals->hasMorePages() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $withdrawals->appends(request()->query())->nextPageUrl() ?? '#' }}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

{{-- ════════════════ MODALS ════════════════ --}}

{{-- Withdraw Request Modal --}}
<div class="modal fade" id="withdrawModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-arrow-up-circle-fill me-2" style="color:var(--primary);"></i>
                    Ajukan Pencairan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="withdrawForm" action="{{ route('sales.withdraw.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Nominal Pencairan <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text" style="font-weight:700;">Rp</span>
                            <input type="number" class="form-control" id="withdrawAmount" name="amount"
                                   placeholder="Masukkan nominal"
                                   min="{{ $minWithdraw }}" max="{{ $availableCommission }}" required>
                        </div>
                        <div class="text-muted small mt-1">
                            <i class="bi bi-info-circle me-1"></i>
                            Fee Rp {{ number_format($withdrawFee, 0, ',', '.') }} akan dipotong otomatis
                        </div>
                        <div id="amountError" class="text-danger small mt-1" style="display:none;">
                            <i class="bi bi-exclamation-circle me-1"></i>
                            Minimal Rp {{ number_format($minWithdraw, 0, ',', '.') }}
                        </div>
                        <div id="balanceError" class="text-danger small mt-1" style="display:none;">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>
                            Melebihi saldo tersedia (Rp {{ number_format($availableCommission, 0, ',', '.') }})
                        </div>
                    </div>

                    {{-- Estimasi diterima --}}
                    <div style="background: linear-gradient(135deg, #ECFDF5, #D1FAE5); border: 1.5px solid rgba(5,150,105,0.25); border-radius: 14px; padding: 1.2rem; text-align:center;">
                        <div class="text-muted" style="font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.3rem;">
                            Estimasi diterima
                        </div>
                        <div class="money-display" id="estimatedReceive"
                             style="font-size:1.8rem; font-weight:800; color:var(--primary);">
                            Rp 0
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="gap:0.75rem;">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal" style="flex:1;">Batal</button>
                <button type="button" class="btn btn-primary" id="submitWithdraw" disabled style="flex:2;">
                    Konfirmasi Pencairan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Proof Modal --}}
<div class="modal fade" id="proofModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-receipt me-2" style="color:var(--primary);"></i>
                    Bukti Transfer
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {{-- Summary --}}
                <div style="background:var(--light); border-radius:14px; padding:1.2rem; margin-bottom:1.25rem;">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Tanggal</div>
                            <div class="fw-semibold mt-1" id="proofDate" style="font-size:0.92rem;">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Request Amount</div>
                            <div class="fw-semibold money-display mt-1" id="proofAmount" style="font-size:0.92rem;">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Withdraw Fee</div>
                            <div class="fw-semibold mt-1" id="proofAdminFee" style="font-size:0.92rem;">-</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Diterima</div>
                            <div class="money-display fw-bold mt-1" id="proofReceived" style="font-size:1.05rem; color:var(--primary);">-</div>
                        </div>
                    </div>
                </div>

                {{-- Image --}}
                <div id="proofImageContainer" style="background:var(--light); border-radius:14px; padding:2.5rem; text-align:center;">
                    <i class="bi bi-image d-block mb-2" style="font-size:3rem; color:#94A3B8;"></i>
                    <div class="text-muted" style="font-size:0.88rem;">Bukti transfer dari admin</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Reject Reason Modal --}}
<div class="modal fade" id="rejectReasonModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background:#FEF2F2; border-bottom-color:#FEE2E2;">
                <h5 class="modal-title" style="color:var(--danger);">
                    <i class="bi bi-x-circle-fill me-2"></i>
                    Pengajuan Ditolak
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div style="background:#FEF2F2; border:1.5px solid #FECACA; border-radius:14px; padding:1.2rem;">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Tanggal</div>
                            <div class="fw-semibold mt-1" id="rejectDate">-</div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Request Amount</div>
                            <div class="fw-semibold mt-1" id="rejectAmount">-</div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted" style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;">Alasan Penolakan</div>
                            <div class="fw-semibold mt-1" id="rejectNotes" style="color:var(--danger);">-</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const withdrawAmountInput = document.getElementById('withdrawAmount');
    const estimatedReceiveEl  = document.getElementById('estimatedReceive');
    const submitWithdrawBtn   = document.getElementById('submitWithdraw');
    const amountError         = document.getElementById('amountError');
    const balanceErrorEl      = document.getElementById('balanceError');
    const withdrawForm        = document.getElementById('withdrawForm');
    const withdrawFee         = {{ $withdrawFee }};
    const minWithdraw         = {{ $minWithdraw }};
    const availableBalance    = {{ $availableCommission }};

    function fmt(n) { return 'Rp ' + n.toLocaleString('id-ID'); }

    function calculateReceive() {
        const amount = parseInt(withdrawAmountInput.value) || 0;
        const receive = amount - withdrawFee;
        estimatedReceiveEl.textContent = amount > 0 ? fmt(receive) : 'Rp 0';

        if (amount > 0 && amount < minWithdraw) {
            amountError.style.display  = 'block';
            balanceErrorEl.style.display = 'none';
            submitWithdrawBtn.disabled = true;
        } else if (amount > availableBalance) {
            amountError.style.display  = 'none';
            balanceErrorEl.style.display = 'block';
            submitWithdrawBtn.disabled = true;
        } else if (amount >= minWithdraw && amount <= availableBalance) {
            amountError.style.display  = 'none';
            balanceErrorEl.style.display = 'none';
            submitWithdrawBtn.disabled = false;
        } else {
            amountError.style.display  = 'none';
            balanceErrorEl.style.display = 'none';
            submitWithdrawBtn.disabled = true;
        }
    }

    withdrawAmountInput.addEventListener('input', calculateReceive);

    submitWithdrawBtn.addEventListener('click', function (e) {
        e.preventDefault();
        const amount = parseInt(withdrawAmountInput.value);
        if (amount < minWithdraw || amount > availableBalance) return;

        submitWithdrawBtn.disabled = true;
        submitWithdrawBtn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>Memproses...';

        fetch(withdrawForm.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ amount })
        })
        .then(async r => {
            const data = await r.json().catch(() => null);
            if (!r.ok) throw new Error(data?.message || 'Terjadi kesalahan.');
            return data;
        })
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('withdrawModal')).hide();
                withdrawForm.reset();
                estimatedReceiveEl.textContent = 'Rp 0';
                amountError.style.display = 'none';
                balanceErrorEl.style.display = 'none';
                submitWithdrawBtn.disabled = true;
                submitWithdrawBtn.innerHTML = 'Konfirmasi Pencairan';
                showNotif('success', data.message);
                setTimeout(() => window.location.reload(), 1000);
            } else {
                throw new Error(data?.message || 'Terjadi kesalahan.');
            }
        })
        .catch(err => {
            showNotif('danger', err.message || 'Terjadi kesalahan.');
            submitWithdrawBtn.disabled = false;
            submitWithdrawBtn.innerHTML = 'Konfirmasi Pencairan';
        });
    });

    function showNotif(type, msg) {
        const el = document.createElement('div');
        el.className = `alert alert-${type} position-fixed`;
        el.style.cssText = 'top:20px;right:20px;z-index:9999;min-width:300px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.12);';
        el.innerHTML = `<i class="bi bi-${type === 'success' ? 'check-circle-fill' : 'exclamation-triangle-fill'} me-2"></i>${msg}`;
        document.body.appendChild(el);
        setTimeout(() => el.remove(), 3500);
    }

    // Proof modal handler
    document.querySelectorAll('.view-proof-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.getElementById('proofDate').textContent    = this.dataset.date;
            document.getElementById('proofAmount').textContent  = 'Rp ' + parseInt(this.dataset.amount).toLocaleString('id-ID');
            document.getElementById('proofAdminFee').textContent = 'Rp ' + parseInt(this.dataset.adminFee).toLocaleString('id-ID');
            document.getElementById('proofReceived').textContent = 'Rp ' + parseInt(this.dataset.received).toLocaleString('id-ID');

            const proof = this.dataset.proof || '';
            const container = document.getElementById('proofImageContainer');
            container.innerHTML = proof.trim()
                ? `<img src="${proof}" alt="Bukti Transfer" style="max-width:100%; border-radius:12px;">`
                : `<i class="bi bi-image d-block mb-2" style="font-size:3rem; color:#94A3B8;"></i><div class="text-muted" style="font-size:0.88rem;">Bukti transfer dari admin</div>`;
        });
    });

    // Reject modal handler
    document.querySelectorAll('.view-reject-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.getElementById('rejectDate').textContent   = this.dataset.date;
            document.getElementById('rejectAmount').textContent = 'Rp ' + parseInt(this.dataset.amount).toLocaleString('id-ID');
            document.getElementById('rejectNotes').textContent  = this.dataset.notes || '-';
        });
    });
});
</script>
@endsection