<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';

requireRole('branch_admin');
$pageTitle = 'Keuangan';

$db = db();

// ============================================================================
// 1. DETEKSI CABANG USER
// ============================================================================
$currentUserId = currentUserId();
$userBranchId = null;
$userBranchName = 'Unknown';

try {
    $stmt = $db->prepare("SELECT u.branch_id, b.name as branch_name 
                          FROM users u LEFT JOIN branches b ON u.branch_id = b.id 
                          WHERE u.id = ?");
    $stmt->execute([$currentUserId]);
    $row = $stmt->fetch();
    $userBranchId = $row ? (int)$row['branch_id'] : null;
    $userBranchName = $row['branch_name'] ?? 'Unknown';
} catch (\Throwable $e) {}

if (!$userBranchId) {
    redirect('/branch/dashboard.php', '❌ Akun tidak terdaftar di cabang.', 'error');
}

// ============================================================================
// 2. AUTO-CREATE TABEL branch_bank_accounts (jika belum ada)
// ============================================================================
try {
    $db->exec("CREATE TABLE IF NOT EXISTS branch_bank_accounts (
        id INT AUTO_INCREMENT PRIMARY KEY,
        branch_id INT NOT NULL,
        bank_name VARCHAR(50) NOT NULL,
        account_number VARCHAR(50) NOT NULL,
        account_holder VARCHAR(100) NOT NULL,
        ktp_photo VARCHAR(255) DEFAULT NULL,
        buku_rek_photo VARCHAR(255) DEFAULT NULL,
        is_verified TINYINT(1) DEFAULT 0,
        verified_by INT DEFAULT NULL,
        verified_at DATETIME DEFAULT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        INDEX idx_branch (branch_id),
        INDEX idx_verified (is_verified)
    )");
    
    // Tambah kolom payment_type di branch_transactions jika belum ada
    $checkCol = $db->query("SHOW COLUMNS FROM branch_transactions LIKE 'payment_type'")->fetch();
    if (!$checkCol) {
        $db->exec("ALTER TABLE branch_transactions ADD COLUMN payment_type ENUM('cash','link') DEFAULT 'link' AFTER payment_channel");
    }
} catch (\Throwable $e) {}

// ============================================================================
// 3. HANDLE ACTIONS
// ============================================================================
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    $action = $_POST['action'] ?? '';
    
    try {
        // ====================================================================
        // TAMBAH BANK ACCOUNT
        // ====================================================================
        if ($action === 'add_bank_account') {
            $bankName = trim($_POST['bank_name'] ?? '');
            $accountNumber = trim($_POST['account_number'] ?? '');
            $accountHolder = trim($_POST['account_holder'] ?? '');
            
            if (empty($bankName) || empty($accountNumber) || empty($accountHolder)) {
                throw new Exception('Semua field wajib diisi');
            }
            
            // Validasi upload KTP
            if (!isset($_FILES['ktp_photo']) || $_FILES['ktp_photo']['error'] !== UPLOAD_ERR_OK) {
                throw new Exception('Upload foto KTP wajib');
            }
            
            // Validasi upload Buku Rekening
            if (!isset($_FILES['buku_rek_photo']) || $_FILES['buku_rek_photo']['error'] !== UPLOAD_ERR_OK) {
                throw new Exception('Upload foto Buku Rekening/M-Banking wajib');
            }
            
            // Validasi ukuran file (max 5MB)
            $maxSize = 5 * 1024 * 1024;
            if ($_FILES['ktp_photo']['size'] > $maxSize) {
                throw new Exception('Ukuran foto KTP maksimal 5MB');
            }
            if ($_FILES['buku_rek_photo']['size'] > $maxSize) {
                throw new Exception('Ukuran foto Buku Rekening maksimal 5MB');
            }
            
            // Validasi tipe file
            $allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!in_array($_FILES['ktp_photo']['type'], $allowedTypes)) {
                throw new Exception('Foto KTP harus format JPG/PNG');
            }
            if (!in_array($_FILES['buku_rek_photo']['type'], $allowedTypes)) {
                throw new Exception('Foto Buku Rekening harus format JPG/PNG');
            }
            
            // Cek duplikasi nomor rekening di cabang ini
            $check = $db->prepare("SELECT id FROM branch_bank_accounts WHERE branch_id = ? AND account_number = ?");
            $check->execute([$userBranchId, $accountNumber]);
            if ($check->fetch()) {
                throw new Exception('Nomor rekening ini sudah terdaftar di cabang Anda');
            }
            
            // Upload file
            $uploadDir = __DIR__ . '/../uploads/bank_accounts/';
            if (!is_dir($uploadDir)) {
                mkdir($uploadDir, 0755, true);
            }
            
            $timestamp = time();
            $ktpExt = pathinfo($_FILES['ktp_photo']['name'], PATHINFO_EXTENSION);
            $bukuExt = pathinfo($_FILES['buku_rek_photo']['name'], PATHINFO_EXTENSION);
            
            $ktpFilename = "ktp_{$userBranchId}_{$timestamp}.{$ktpExt}";
            $bukuFilename = "buku_{$userBranchId}_{$timestamp}.{$bukuExt}";
            
            if (!move_uploaded_file($_FILES['ktp_photo']['tmp_name'], $uploadDir . $ktpFilename)) {
                throw new Exception('Gagal upload foto KTP');
            }
            if (!move_uploaded_file($_FILES['buku_rek_photo']['tmp_name'], $uploadDir . $bukuFilename)) {
                throw new Exception('Gagal upload foto Buku Rekening');
            }
            
            // Simpan ke database
            $stmt = $db->prepare("
                INSERT INTO branch_bank_accounts 
                (branch_id, bank_name, account_number, account_holder, ktp_photo, buku_rek_photo, created_at)
                VALUES (?, ?, ?, ?, ?, ?, NOW())
            ");
            $stmt->execute([
                $userBranchId, $bankName, $accountNumber, $accountHolder,
                'uploads/bank_accounts/' . $ktpFilename,
                'uploads/bank_accounts/' . $bukuFilename
            ]);
            
            logActivity($currentUserId, 'add_bank_account', 
                "Tambah rekening bank {$bankName} - {$accountNumber} a.n. {$accountHolder} di cabang {$userBranchName}");
            
            redirect('/branch/finance.php?tab=withdrawal', '✅ Rekening bank berhasil ditambahkan. Menunggu verifikasi Super Admin.');
        }
        
        // ====================================================================
        // AJUKAN PENARIKAN
        // ====================================================================
        if ($action === 'request_withdrawal') {
            $bankAccountId = (int)($_POST['bank_account_id'] ?? 0);
            $amount = (float)($_POST['amount'] ?? 0);
            $notes = trim($_POST['notes'] ?? '');
            
            if ($bankAccountId <= 0) {
                throw new Exception('Pilih rekening bank tujuan');
            }
            if ($amount < 50000) throw new Exception('Minimum penarikan Rp 50.000');
            
            // Ambil data bank account
            $stmt = $db->prepare("SELECT * FROM branch_bank_accounts WHERE id = ? AND branch_id = ?");
            $stmt->execute([$bankAccountId, $userBranchId]);
            $bankAccount = $stmt->fetch();
            
            if (!$bankAccount) {
                throw new Exception('Rekening bank tidak ditemukan');
            }
            
            if (!$bankAccount['is_verified']) {
                throw new Exception('Rekening bank belum diverifikasi oleh Super Admin. Silakan tunggu verifikasi.');
            }
            
            // Cek saldo
            $stmt = $db->prepare("SELECT available_balance FROM branch_balances WHERE branch_id = ?");
            $stmt->execute([$userBranchId]);
            $bal = $stmt->fetch();
            
            if (!$bal || $bal['available_balance'] < $amount) {
                throw new Exception('Saldo tersedia tidak mencukupi. Saldo Anda: Rp ' . 
                    number_format($bal['available_balance'] ?? 0));
            }
            
            $yearMonth = date('Ym');
            $stmt = $db->prepare("SELECT COUNT(*) as count FROM branch_withdrawals WHERE withdrawal_number LIKE ?");
            $stmt->execute(["WD-$yearMonth-%"]);
            $count = $stmt->fetch()['count'] + 1;
            $wdNumber = sprintf("WD-%s-%03d", $yearMonth, $count);
            
            $stmt = $db->prepare("
                INSERT INTO branch_withdrawals 
                (branch_id, withdrawal_number, amount, bank_name, account_number, 
                 account_holder, notes, status, requested_by, requested_at)
                VALUES (?, ?, ?, ?, ?, ?, ?, 'pending', ?, NOW())
            ");
            $stmt->execute([
                $userBranchId, $wdNumber, $amount, 
                $bankAccount['bank_name'], $bankAccount['account_number'], 
                $bankAccount['account_holder'], $notes, $currentUserId
            ]);
            
            logActivity($currentUserId, 'request_withdrawal', 
                "Ajukan penarikan $wdNumber - Rp " . number_format($amount));
            
            redirect('/branch/finance.php?tab=withdrawal', '✅ Pengajuan penarikan <strong>' . $wdNumber . '</strong> berhasil dikirim');
        }
        
        // ====================================================================
        // CANCEL PENARIKAN
        // ====================================================================
        if ($action === 'cancel_withdrawal') {
            $wdId = (int)($_POST['withdrawal_id'] ?? 0);
            
            $stmt = $db->prepare("
                UPDATE branch_withdrawals 
                SET status = 'rejected', review_notes = 'Dibatalkan oleh cabang', reviewed_at = NOW()
                WHERE id = ? AND branch_id = ? AND status = 'pending'
            ");
            $stmt->execute([$wdId, $userBranchId]);
            
            redirect('/branch/finance.php?tab=withdrawal', '✅ Pengajuan penarikan dibatalkan');
        }
        
    } catch (\Throwable $e) {
        $_SESSION['flash_error'] = '❌ ' . $e->getMessage();
    }
}

$flashError = $_SESSION['flash_error'] ?? '';
unset($_SESSION['flash_error']);

// ============================================================================
// 4. LOAD DATA
// ============================================================================
$stmt = $db->prepare("SELECT * FROM branch_balances WHERE branch_id = ?");
$stmt->execute([$userBranchId]);
$balance = $stmt->fetch();

if (!$balance) {
    $db->prepare("INSERT INTO branch_balances (branch_id) VALUES (?)")->execute([$userBranchId]);
    $balance = [
        'pending_balance' => 0,
        'available_balance' => 0,
        'total_withdrawn' => 0,
        'total_income' => 0
    ];
}

// Load bank accounts cabang ini
$bankAccounts = [];
try {
    $stmt = $db->prepare("SELECT * FROM branch_bank_accounts WHERE branch_id = ? ORDER BY is_verified DESC, created_at DESC");
    $stmt->execute([$userBranchId]);
    $bankAccounts = $stmt->fetchAll();
} catch (\Throwable $e) {}

$verifiedBankAccounts = array_filter($bankAccounts, fn($b) => $b['is_verified']);
$pendingBankAccounts = array_filter($bankAccounts, fn($b) => !$b['is_verified']);

$stats = [
    'today_count' => 0, 'today_amount' => 0,
    'this_month_count' => 0, 'this_month_amount' => 0,
    'pending_count' => 0, 'pending_amount' => 0,
    'released_count' => 0, 'released_amount' => 0,
    'cash_count' => 0, 'cash_amount' => 0,
];
try {
    $stmt = $db->prepare("
        SELECT 
            SUM(CASE WHEN DATE(created_at) = CURDATE() THEN 1 ELSE 0 END) as today_count,
            COALESCE(SUM(CASE WHEN DATE(created_at) = CURDATE() THEN amount ELSE 0 END), 0) as today_amount,
            SUM(CASE WHEN MONTH(created_at) = MONTH(CURDATE()) AND YEAR(created_at) = YEAR(CURDATE()) THEN 1 ELSE 0 END) as this_month_count,
            COALESCE(SUM(CASE WHEN MONTH(created_at) = MONTH(CURDATE()) AND YEAR(created_at) = YEAR(CURDATE()) THEN amount ELSE 0 END), 0) as this_month_amount,
            SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending_count,
            COALESCE(SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END), 0) as pending_amount,
            SUM(CASE WHEN status = 'released' THEN 1 ELSE 0 END) as released_count,
            COALESCE(SUM(CASE WHEN status = 'released' THEN amount ELSE 0 END), 0) as released_amount,
            SUM(CASE WHEN payment_type = 'cash' THEN 1 ELSE 0 END) as cash_count,
            COALESCE(SUM(CASE WHEN payment_type = 'cash' THEN amount ELSE 0 END), 0) as cash_amount
        FROM branch_transactions
        WHERE branch_id = ?
    ");
    $stmt->execute([$userBranchId]);
    $stats = array_merge($stats, $stmt->fetch() ?: []);
} catch (\Throwable $e) {}

// Filter transaksi
$filterStatus = $_GET['status'] ?? '';
$filterPaymentType = $_GET['payment_type'] ?? '';
$filterDateFrom = $_GET['date_from'] ?? '';
$filterDateTo = $_GET['date_to'] ?? '';
$search = trim($_GET['search'] ?? '');
$page = max(1, (int)($_GET['page'] ?? 1));
$perPage = 15;
$offset = ($page - 1) * $perPage;

$where = ["branch_id = ?"];
$params = [$userBranchId];

if ($filterStatus) {
    $where[] = "status = ?";
    $params[] = $filterStatus;
}
if ($filterPaymentType) {
    $where[] = "payment_type = ?";
    $params[] = $filterPaymentType;
}
if ($filterDateFrom) {
    $where[] = "DATE(created_at) >= ?";
    $params[] = $filterDateFrom;
}
if ($filterDateTo) {
    $where[] = "DATE(created_at) <= ?";
    $params[] = $filterDateTo;
}
if (!empty($search)) {
    $where[] = "(customer_name LIKE ? OR bill_number LIKE ? OR transaction_id LIKE ?)";
    $sp = "%$search%";
    $params[] = $sp; $params[] = $sp; $params[] = $sp;
}

$whereClause = implode(' AND ', $where);

try {
    $stmt = $db->prepare("SELECT COUNT(*) as total FROM branch_transactions WHERE $whereClause");
    $stmt->execute($params);
    $totalRows = (int)$stmt->fetch()['total'];
    $totalPages = max(1, ceil($totalRows / $perPage));
} catch (\Throwable $e) {
    $totalRows = 0;
    $totalPages = 1;
}

$transactions = [];
try {
    $stmt = $db->prepare("
        SELECT * FROM branch_transactions 
        WHERE $whereClause
        ORDER BY created_at DESC
        LIMIT $perPage OFFSET $offset
    ");
    $stmt->execute($params);
    $transactions = $stmt->fetchAll();
} catch (\Throwable $e) {}

$withdrawals = [];
try {
    $stmt = $db->prepare("
        SELECT w.*, u.name as reviewer_name
        FROM branch_withdrawals w
        LEFT JOIN users u ON w.reviewed_by = u.id
        WHERE w.branch_id = ?
        ORDER BY w.requested_at DESC
        LIMIT 50
    ");
    $stmt->execute([$userBranchId]);
    $withdrawals = $stmt->fetchAll();
} catch (\Throwable $e) {}

$activeTab = $_GET['tab'] ?? 'overview';

// Recent transactions for overview
$recentTrx = [];
try {
    $stmt = $db->prepare("SELECT * FROM branch_transactions WHERE branch_id = ? ORDER BY created_at DESC LIMIT 5");
    $stmt->execute([$userBranchId]);
    $recentTrx = $stmt->fetchAll();
} catch (\Throwable $e) {}

$pendingWd = count(array_filter($withdrawals, fn($w) => $w['status'] === 'pending'));

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<style>
/* === NAVBAR MODERN === */
.navbar-modern {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.burger-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.burger-btn:hover,
.burger-btn:active {
    background: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

.navbar-info {
    min-width: 0;
    flex: 1;
}

.navbar-greeting {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 0;
}

.navbar-title {
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.navbar-badge {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* === MAIN CONTENT === */
.main-content {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 20px; /* jarak antar div */
}

.page-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-title i {
    font-size: 1.8rem;
    color: #0066CC;
}

.branch-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #003D7A;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* === SUMMARY CARDS === */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.summary-card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.summary-card.warning { border-left-color: #FF9900; }
.summary-card.success { border-left-color: #00C853; }
.summary-card.primary { border-left-color: #0066CC; }
.summary-card.info { border-left-color: #00B8D4; }
.summary-card.purple { border-left-color: #9C27B0; }

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.summary-card-title {
    color: #666;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.15rem;
}

.summary-card.warning .summary-card-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.info .summary-card-icon { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }
.summary-card.purple .summary-card-icon { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }

.summary-card-value {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    color: #003D7A;
    line-height: 1.1;
    word-break: break-word;
}

.summary-card-footer {
    font-size: 0.78rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* === STATUS TABS === */
.status-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.status-tab {
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid #e8f4f8;
    background: white;
    color: #666;
}

.status-tab:hover {
    border-color: #0066CC;
    color: #0066CC;
}

.status-tab.active {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.status-tab.success.active {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.status-tab.warning.active {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.status-tab.purple.active {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.status-tab-count {
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-tab:not(.active) .status-tab-count {
    background: #e8f4f8;
    color: #666;
}

/* === ALERT MODERN === */
.alert-modern {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    border: 2px solid;
}

.alert-modern.success { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.alert-modern.danger { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.alert-modern.warning { background: #fff8e1; border-color: #ffe082; color: #f57c00; }
.alert-modern.info { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }

.alert-modern i {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === CARD MODERN === */
.card-modern {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
}

.card-header-modern {
    color: white;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.card-header-modern.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.card-header-modern.success { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.card-header-modern.info { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }
.card-header-modern.warning { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.card-header-modern.purple { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }

.card-header-modern .title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-modern {
    padding: 20px;
}

/* === STATS GRID === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.stat-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border-left: 3px solid #0066CC;
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stat-item.primary { border-left-color: #0066CC; }
.stat-item.info { border-left-color: #00B8D4; }
.stat-item.warning { border-left-color: #FF9900; }
.stat-item.success { border-left-color: #00C853; }
.stat-item.purple { border-left-color: #9C27B0; }

.stat-label {
    font-size: 0.72rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #003D7A;
    margin-bottom: 2px;
}

.stat-sub {
    font-size: 0.72rem;
    color: #999;
}

/* === RECENT TRANSACTION LIST === */
.recent-list {
    display: grid;
    gap: 8px;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.recent-item:hover {
    background: #eef5fc;
    transform: translateX(2px);
}

.recent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.recent-avatar.cash {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}

.recent-content {
    flex: 1;
    min-width: 0;
}

.recent-name {
    font-weight: 600;
    color: #003D7A;
    font-size: 0.85rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-meta {
    font-size: 0.72rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.recent-amount {
    font-weight: 800;
    color: #0066CC;
    font-size: 0.88rem;
    white-space: nowrap;
}

.payment-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.payment-type-badge.cash {
    background: #f3e5f5;
    color: #6a1b9a;
}

.payment-type-badge.link {
    background: #e3f2fd;
    color: #1565c0;
}

/* === QUICK ACTIONS === */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.quick-action-card {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    color: inherit;
    display: block;
}

.quick-action-card:hover {
    border-color: #0066CC;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.12);
    color: inherit;
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    margin: 0 auto 8px;
}

.quick-action-icon.success { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.quick-action-icon.warning { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.quick-action-icon.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.quick-action-icon.purple { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }

.quick-action-title {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.85rem;
}

/* === FILTER FORM === */
.filter-form {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr auto auto;
    gap: 10px;
    align-items: end;
}

.form-group-filter {
    margin-bottom: 0;
}

.form-label-filter {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 6px;
    font-size: 0.78rem;
}

.form-control-filter,
.form-select-filter {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
    box-sizing: border-box;
}

.form-control-filter:focus,
.form-select-filter:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.btn-filter {
    padding: 9px 14px;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    height: 40px;
}

.btn-filter.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-filter.outline {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

/* === TABLE MODERN === */
.table-wrapper {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
}

.table-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.table-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.table-header-count {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    min-width: 900px;
}

.table-modern thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-modern th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    color: #003D7A;
    border-bottom: 2px solid #e8f4f8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table-modern td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background: #f8fafc;
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

/* === CUSTOMER CELL === */
.customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.customer-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.3;
}

.customer-meta {
    font-size: 0.7rem;
    color: #999;
    margin-top: 1px;
}

/* === AMOUNT === */
.amount {
    font-weight: 800;
    color: #0066CC;
    font-size: 0.88rem;
}

/* === BADGE MODERN === */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-modern.pending { background: #fff3cd; color: #856404; }
.badge-modern.released { background: #d1e7dd; color: #0f5132; }
.badge-modern.cancelled { background: #f8d7da; color: #842029; }
.badge-modern.approved { background: #d1e7dd; color: #0f5132; }
.badge-modern.rejected { background: #f8d7da; color: #842029; }
.badge-modern.processed { background: #cfe2ff; color: #084298; }
.badge-modern.cash { background: #f3e5f5; color: #6a1b9a; }
.badge-modern.link { background: #e3f2fd; color: #1565c0; }

/* === ACTION BUTTONS === */
.action-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.btn-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.88rem;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-action.view { background: #cfe2ff; color: #084298; }
.btn-action.view:hover { background: #0066CC; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3); }

.btn-action.cancel { background: #ffe5e5; color: #842029; }
.btn-action.cancel:hover { background: #b02a37; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(176, 42, 55, 0.3); }

/* === BANK ACCOUNT CARD === */
.bank-account-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.bank-account-card {
    background: white;
    border: 2px solid #e8f4f8;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.bank-account-card:hover {
    border-color: #0066CC;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.bank-account-card.selected {
    border-color: #00C853;
    background: #f0faf3;
}

.bank-account-card.unverified {
    opacity: 0.7;
    border-style: dashed;
}

.bank-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bank-icon.unverified {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
}

.bank-info {
    flex: 1;
    min-width: 0;
}

.bank-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.bank-detail {
    font-size: 0.78rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bank-detail code {
    background: #f8fafc;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.bank-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
}

.bank-status-badge.verified {
    background: #d1e7dd;
    color: #0f5132;
}

.bank-status-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.bank-radio {
    width: 20px;
    height: 20px;
    accent-color: #00C853;
    cursor: pointer;
}

/* === WITHDRAWAL FORM === */
.withdrawal-form-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
}

.withdrawal-form-header {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.withdrawal-form-body {
    padding: 20px;
}

.form-grid-withdrawal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-grid-withdrawal.single {
    grid-template-columns: 1fr;
}

.form-group-withdrawal {
    margin-bottom: 0;
}

.form-label-withdrawal {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.form-label-withdrawal i {
    color: #00C853;
}

.form-label-withdrawal .required {
    color: #DC3545;
    margin-left: 2px;
}

.form-control-withdrawal,
.form-select-withdrawal {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
    box-sizing: border-box;
}

.form-control-withdrawal:focus,
.form-select-withdrawal:focus {
    outline: none;
    border-color: #00C853;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.1);
}

textarea.form-control-withdrawal {
    resize: vertical;
    min-height: 60px;
}

.balance-info-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.balance-info-label {
    font-size: 0.82rem;
    color: #2e7d32;
    font-weight: 600;
}

.balance-info-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1b5e20;
}

.btn-withdraw {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 200, 83, 0.3);
    margin-top: 16px;
}

.btn-withdraw:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.4);
}

.btn-add-bank {
    width: 100%;
    padding: 12px;
    background: white;
    color: #0066CC;
    border: 2px dashed #0066CC;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.btn-add-bank:hover {
    background: #e3f2fd;
    transform: translateY(-2px);
}

/* === PAGINATION === */
.pagination-modern {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    flex-wrap: wrap;
}

.pagination-modern a {
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    background: #f8fafc;
    border: 1px solid #e8f4f8;
    transition: all 0.3s ease;
}

.pagination-modern a:hover {
    background: #e3f2fd;
    color: #0066CC;
    border-color: #0066CC;
}

.pagination-modern a.active {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    border-color: transparent;
}

.pagination-modern a.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-state-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
}

.empty-state-title {
    color: #666;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
}

.empty-state-subtitle {
    color: #999;
    font-size: 0.85rem;
    margin: 0;
}

/* === MODAL MODERN === */
.modal-modern .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-modern .modal-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 18px 24px;
    border: none;
}

.modal-modern .modal-header.success {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
}

.modal-modern .modal-header.purple {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}

.modal-modern .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.modal-modern .modal-body {
    padding: 24px;
}

.modal-modern .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #e8f4f8;
    align-items: flex-start;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #666;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-value {
    color: #333;
    font-size: 0.9rem;
    word-break: break-word;
}

.detail-value strong {
    color: #003D7A;
}

.info-box-modal {
    background: #e3f2fd;
    border-left: 3px solid #0066CC;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1565c0;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-box-modal i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.info-box-modal.warning {
    background: #fff8e1;
    border-left-color: #FF9900;
    color: #f57c00;
}

.btn-modal {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-modal.secondary {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

.btn-modal.secondary:hover {
    background: #f8fafc;
}

.btn-modal.success {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.btn-modal.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* === FILE UPLOAD === */
.file-upload-group {
    margin-bottom: 14px;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.file-upload-label i {
    color: #0066CC;
}

.file-upload-label .required {
    color: #DC3545;
    margin-left: 2px;
}

.file-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.file-upload-area:hover {
    border-color: #0066CC;
    background: #e3f2fd;
}

.file-upload-area i {
    font-size: 2rem;
    color: #0066CC;
    margin-bottom: 8px;
}

.file-upload-area .upload-text {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
}

.file-upload-area .upload-hint {
    font-size: 0.72rem;
    color: #999;
}

.file-upload-area input[type="file"] {
    display: none;
}

.file-preview {
    margin-top: 10px;
    display: none;
}

.file-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    border: 2px solid #e8f4f8;
}

.file-preview-info {
    font-size: 0.75rem;
    color: #00C853;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === PAYMENT TYPE INFO === */
.payment-type-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.payment-type-card {
    border-radius: 12px;
    padding: 14px;
    border: 2px solid;
}

.payment-type-card.cash {
    background: #f3e5f5;
    border-color: #ce93d8;
}

.payment-type-card.link {
    background: #e3f2fd;
    border-color: #90caf9;
}

.payment-type-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-type-card.cash .payment-type-title { color: #6a1b9a; }
.payment-type-card.link .payment-type-title { color: #1565c0; }

.payment-type-desc {
    font-size: 0.75rem;
    line-height: 1.4;
}

.payment-type-card.cash .payment-type-desc { color: #8e24aa; }
.payment-type-card.link .payment-type-desc { color: #1976d2; }

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-form .form-group-filter:first-child {
        grid-column: 1 / -1;
    }
    
    .form-grid-withdrawal {
        grid-template-columns: 1fr;
    }
    
    .payment-type-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .navbar-modern {
        padding: 10px 15px;
    }
    
    .navbar-title {
        font-size: 1rem;
    }
    
    .navbar-greeting {
        display: none;
    }
    
    .navbar-badge {
        display: none;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-title {
        font-size: 1.3rem;
    }
    
    .page-title i {
        font-size: 1.5rem;
    }
    
    .summary-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .summary-card {
        padding: 14px;
    }
    
    .summary-card-value {
        font-size: 1.1rem;
    }
    
    .summary-card-title {
        font-size: 0.68rem;
    }
    
    .summary-card-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    
    .status-tabs {
        gap: 6px;
    }
    
    .status-tab {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    
    .card-header-modern {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
    
    .card-body-modern {
        padding: 16px;
    }
    
    .filter-form {
        grid-template-columns: 1fr;
    }
    
    .filter-form .form-group-filter {
        grid-column: 1 / -1;
    }
    
    .filter-form .btn-filter {
        flex: 1;
    }
    
    .table-header {
        padding: 14px 16px;
    }
    
    .table-header-title {
        font-size: 0.92rem;
    }
    
    .table-modern {
        font-size: 0.8rem;
    }
    
    .table-modern th,
    .table-modern td {
        padding: 10px 12px;
    }
    
    .customer-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .customer-name {
        font-size: 0.8rem;
    }
    
    .btn-action {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-action-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    
    .quick-action-title {
        font-size: 0.78rem;
    }
    
    .detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .modal-modern .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    
    .modal-modern .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    
    .bank-account-card {
        padding: 12px;
        gap: 10px;
    }
    
    .bank-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .bank-name {
        font-size: 0.85rem;
    }
    
    .bank-detail {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .navbar-modern {
        padding: 8px 12px;
    }
    
    .burger-btn {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
    
    .navbar-title {
        font-size: 0.95rem;
    }
    
    .main-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.15rem;
        gap: 8px;
    }
    
    .summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .summary-card {
        padding: 12px;
    }
    
    .summary-card-value {
        font-size: 1rem;
    }
    
    .summary-card-footer {
        font-size: 0.7rem;
    }
    
    .table-header {
        padding: 12px 14px;
    }
    
    .table-modern th,
    .table-modern td {
        padding: 8px 10px;
    }
    
    .customer-cell {
        gap: 8px;
    }
    
    .customer-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .customer-name {
        font-size: 0.75rem;
    }
    
    .badge-modern {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }
    
    .action-buttons {
        gap: 3px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .recent-item {
        padding: 8px 10px;
    }
    
    .recent-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .recent-name {
        font-size: 0.8rem;
    }
    
    .recent-amount {
        font-size: 0.82rem;
    }
    
    .withdrawal-form-body {
        padding: 16px;
    }
    
    .balance-info-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .file-upload-area {
        padding: 16px;
    }
    
    .file-upload-area i {
        font-size: 1.5rem;
    }
}
</style>

<!-- Navbar Modern dengan Burger Icon -->

<div class="content-wrapper">
<div class="main-content">
<div class="navbar-modern">
    <div class="navbar-left">
        <button class="burger-btn" onclick="toggleSidebar()">
            <i class="bi bi-list"></i>
        </button>
        <div class="navbar-info">
            <p class="navbar-greeting">Keuangan cabang</p>
            <h1 class="navbar-title">Keuangan - <?= htmlspecialchars($userBranchName) ?></h1>
        </div>
    </div>
    <div class="navbar-right">
        <span class="navbar-badge">
            <i class="bi bi-building"></i> <?= htmlspecialchars($userBranchName) ?>
        </span>
    </div>
</div>    <!-- Page Header -->
    <div class="page-header">
        
    </div>

    <?= flashMessage() ?>
    
    <?php if ($flashError): ?>
        <div class="alert-modern danger">
            <i class="bi bi-exclamation-circle-fill"></i>
            <div><?= htmlspecialchars($flashError) ?></div>
        </div>
    <?php endif; ?>

    <!-- Info Pembayaran -->


    <!-- Summary Cards -->
    <div class="summary-row">
        <div class="summary-card warning">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Saldo Pending</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </div>
            <div class="summary-card-value">Rp <?= number_format($balance['pending_balance'] ?? 0, 0, ',', '.') ?></div>
            <div class="summary-card-footer">⏳ Menunggu H+5 (link payment)</div>
        </div>
        
        <div class="summary-card success">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Saldo Tersedia</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-wallet2"></i>
                </div>
            </div>
            <div class="summary-card-value">Rp <?= number_format($balance['available_balance'] ?? 0, 0, ',', '.') ?></div>
            <div class="summary-card-footer">💰 Siap ditarik</div>
        </div>
        
        <div class="summary-card primary">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Sudah Ditarik</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-cash-stack"></i>
                </div>
            </div>
            <div class="summary-card-value">Rp <?= number_format($balance['total_withdrawn'] ?? 0, 0, ',', '.') ?></div>
            <div class="summary-card-footer">💸 Total ditransfer</div>
        </div>
        
        <div class="summary-card info">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Total Income</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
            </div>
            <div class="summary-card-value">Rp <?= number_format($balance['total_income'] ?? 0, 0, ',', '.') ?></div>
            <div class="summary-card-footer">📈 Seluruh waktu</div>
        </div>
        
        <div class="summary-card purple">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Pembayaran Cash</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-cash"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= $stats['cash_count'] ?></div>
            <div class="summary-card-footer">💵 Rp <?= number_format($stats['cash_amount'] ?? 0, 0, ',', '.') ?></div>
        </div>
    </div>

    <!-- Status Tabs -->
    <div class="status-tabs">
        <a href="?tab=overview" class="status-tab <?= $activeTab === 'overview' ? 'active' : '' ?>">
            <i class="bi bi-speedometer2"></i> Ringkasan
        </a>
        <a href="?tab=transactions" class="status-tab <?= $activeTab === 'transactions' ? 'active' : '' ?>">
            <i class="bi bi-receipt"></i> Transaksi
            <span class="status-tab-count"><?= $totalRows ?></span>
        </a>
        <a href="?tab=withdrawal" class="status-tab warning <?= $activeTab === 'withdrawal' ? 'active' : '' ?>">
            <i class="bi bi-send"></i> Penarikan
            <?php if ($pendingWd > 0): ?>
                <span class="status-tab-count"><?= $pendingWd ?></span>
            <?php endif; ?>
        </a>
        <a href="?tab=bank_accounts" class="status-tab purple <?= $activeTab === 'bank_accounts' ? 'active' : '' ?>">
            <i class="bi bi-bank"></i> Rekening Bank
            <span class="status-tab-count"><?= count($bankAccounts) ?></span>
        </a>
    </div>

    <!-- ============================================================ -->
    <!-- TAB 1: OVERVIEW -->
    <!-- ============================================================ -->
    <?php if ($activeTab === 'overview'): ?>
    <div class="row g-3">
        <!-- Statistik Cepat -->
        <div class="col-lg-6">
            <div class="card-modern">
                <div class="card-header-modern primary">
                    <div class="title-left">
                        <i class="bi bi-lightning-fill"></i>
                        <span>Statistik Pembayaran</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <div class="stats-grid">
                        <div class="stat-item primary">
                            <div class="stat-label">Hari Ini</div>
                            <div class="stat-value"><?= $stats['today_count'] ?></div>
                            <div class="stat-sub">Rp <?= number_format($stats['today_amount'], 0, ',', '.') ?></div>
                        </div>
                        <div class="stat-item info">
                            <div class="stat-label">Bulan Ini</div>
                            <div class="stat-value"><?= $stats['this_month_count'] ?></div>
                            <div class="stat-sub">Rp <?= number_format($stats['this_month_amount'], 0, ',', '.') ?></div>
                        </div>
                        <div class="stat-item warning">
                            <div class="stat-label">Pending</div>
                            <div class="stat-value"><?= $stats['pending_count'] ?></div>
                            <div class="stat-sub">Rp <?= number_format($stats['pending_amount'], 0, ',', '.') ?></div>
                        </div>
                        <div class="stat-item success">
                            <div class="stat-label">Released</div>
                            <div class="stat-value"><?= $stats['released_count'] ?></div>
                            <div class="stat-sub">Rp <?= number_format($stats['released_amount'], 0, ',', '.') ?></div>
                        </div>
                        <div class="stat-item purple">
                            <div class="stat-label">Cash</div>
                            <div class="stat-value"><?= $stats['cash_count'] ?></div>
                            <div class="stat-sub">Rp <?= number_format($stats['cash_amount'], 0, ',', '.') ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 5 Transaksi Terakhir -->
        <div class="col-lg-6">
            <div class="card-modern">
                <div class="card-header-modern info">
                    <div class="title-left">
                        <i class="bi bi-clock-history"></i>
                        <span>5 Transaksi Terakhir</span>
                    </div>
                    <a href="?tab=transactions" style="color: white; text-decoration: none; font-size: 0.82rem; font-weight: 600;">
                        Lihat Semua →
                    </a>
                </div>
                <div class="card-body-modern">
                    <?php if (empty($recentTrx)): ?>
                        <div class="empty-state" style="padding: 20px;">
                            <div class="empty-state-icon" style="width: 50px; height: 50px; font-size: 1.5rem;">
                                <i class="bi bi-inbox"></i>
                            </div>
                            <h5 class="empty-state-title" style="font-size: 0.9rem;">Belum ada transaksi</h5>
                        </div>
                    <?php else: ?>
                        <div class="recent-list">
                            <?php foreach ($recentTrx as $t): 
                                $s = [
                                    'pending' => ['⏳', '#FF9900'],
                                    'released' => ['✅', '#00C853'],
                                    'cancelled' => ['❌', '#DC3545'],
                                ][$t['status']] ?? ['•', '#999'];
                                
                                $isCash = ($t['payment_type'] ?? 'link') === 'cash';
                            ?>
                                <div class="recent-item">
                                    <div class="recent-avatar <?= $isCash ? 'cash' : '' ?>">
                                        <?= strtoupper(substr($t['customer_name'], 0, 1)) ?>
                                    </div>
                                    <div class="recent-content">
                                        <div class="recent-name"><?= htmlspecialchars($t['customer_name']) ?></div>
                                        <div class="recent-meta">
                                            <span class="payment-type-badge <?= $isCash ? 'cash' : 'link' ?>">
                                                <i class="bi bi-<?= $isCash ? 'cash-stack' : 'link-45deg' ?>"></i>
                                                <?= $isCash ? 'Cash' : 'Link' ?>
                                            </span>
                                            <span><?= date('d/m H:i', strtotime($t['created_at'])) ?></span>
                                            <span>•</span>
                                            <span><?= htmlspecialchars($t['bill_number']) ?></span>
                                        </div>
                                    </div>
                                    <div style="text-align: right;">
                                        <div class="recent-amount">Rp <?= number_format($t['amount'], 0, ',', '.') ?></div>
                                        <div style="font-size: 0.85rem;"><?= $s[0] ?></div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card-modern">
        <div class="card-header-modern primary">
            <div class="title-left">
                <i class="bi bi-lightning-charge-fill"></i>
                <span>Aksi Cepat</span>
            </div>
        </div>
        <div class="card-body-modern">
            <div class="quick-actions-grid">
                <a href="?tab=withdrawal" class="quick-action-card">
                    <div class="quick-action-icon success">
                        <i class="bi bi-send-fill"></i>
                    </div>
                    <div class="quick-action-title">Ajukan Penarikan</div>
                </a>
                <a href="?tab=bank_accounts" class="quick-action-card">
                    <div class="quick-action-icon purple">
                        <i class="bi bi-bank"></i>
                    </div>
                    <div class="quick-action-title">Kelola Rekening</div>
                </a>
                <a href="?tab=transactions&status=pending" class="quick-action-card">
                    <div class="quick-action-icon warning">
                        <i class="bi bi-hourglass-split"></i>
                    </div>
                    <div class="quick-action-title">Saldo Pending</div>
                </a>
                <a href="?tab=transactions" class="quick-action-card">
                    <div class="quick-action-icon primary">
                        <i class="bi bi-receipt"></i>
                    </div>
                    <div class="quick-action-title">Semua Transaksi</div>
                </a>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ============================================================ -->
    <!-- TAB 2: TRANSAKSI -->
    <!-- ============================================================ -->
    <?php if ($activeTab === 'transactions'): ?>
    <!-- Filter -->
    <div class="card-modern">
        <div class="card-header-modern primary">
            <div class="title-left">
                <i class="bi bi-funnel-fill"></i>
                <span>Filter & Pencarian</span>
            </div>
        </div>
        <div class="card-body-modern">
            <form method="GET" class="filter-form">
                <input type="hidden" name="tab" value="transactions">
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-search"></i> Cari
                    </label>
                    <input type="text" name="search" class="form-control-filter" 
                           value="<?= htmlspecialchars($search) ?>" 
                           placeholder="Nama, no tagihan, trx ID...">
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-circle"></i> Status
                    </label>
                    <select name="status" class="form-select-filter">
                        <option value="">Semua</option>
                        <option value="pending" <?= $filterStatus === 'pending' ? 'selected' : '' ?>>⏳ Pending</option>
                        <option value="released" <?= $filterStatus === 'released' ? 'selected' : '' ?>>✅ Released</option>
                        <option value="cancelled" <?= $filterStatus === 'cancelled' ? 'selected' : '' ?>>❌ Cancelled</option>
                    </select>
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-credit-card"></i> Tipe Bayar
                    </label>
                    <select name="payment_type" class="form-select-filter">
                        <option value="">Semua</option>
                        <option value="cash" <?= $filterPaymentType === 'cash' ? 'selected' : '' ?>>💵 Cash</option>
                        <option value="link" <?= $filterPaymentType === 'link' ? 'selected' : '' ?>>🔗 Link</option>
                    </select>
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-calendar3"></i> Dari
                    </label>
                    <input type="date" name="date_from" class="form-control-filter" 
                           value="<?= htmlspecialchars($filterDateFrom) ?>">
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-calendar3"></i> Sampai
                    </label>
                    <input type="date" name="date_to" class="form-control-filter" 
                           value="<?= htmlspecialchars($filterDateTo) ?>">
                </div>
                <button type="submit" class="btn-filter primary">
                    <i class="bi bi-funnel"></i>
                    <span>Filter</span>
                </button>
                <a href="?tab=transactions" class="btn-filter outline">
                    <i class="bi bi-arrow-counterclockwise"></i>
                    <span>Reset</span>
                </a>
            </form>
        </div>
    </div>

    <!-- Tabel Transaksi -->
    <div class="table-wrapper">
        <div class="table-header">
            <div class="table-header-title">
                <i class="bi bi-list-ul"></i>
                <span>Daftar Transaksi</span>
                <span class="table-header-count"><?= $totalRows ?> transaksi</span>
            </div>
            <div style="font-size: 0.82rem; opacity: 0.9;">
                Halaman <?= $page ?> / <?= $totalPages ?>
            </div>
        </div>
        
        <?php if (empty($transactions)): ?>
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-inbox"></i>
                </div>
                <h5 class="empty-state-title">Tidak ada transaksi</h5>
                <p class="empty-state-subtitle">
                    <?php if ($filterStatus || $filterDateFrom || $filterDateTo || $search || $filterPaymentType): ?>
                        Tidak ada transaksi yang sesuai filter. 
                        <a href="?tab=transactions" style="color: #0066CC;">Reset filter</a>
                    <?php else: ?>
                        Belum ada transaksi pembayaran di cabang ini.
                    <?php endif; ?>
                </p>
            </div>
        <?php else: ?>
            <div class="table-scroll">
                <table class="table-modern">
                    <thead>
                        <tr>
                            <th style="width:40px">#</th>
                            <th>Tanggal</th>
                            <th>Pelanggan</th>
                            <th>No. Tagihan</th>
                            <th>Jumlah</th>
                            <th>Tipe</th>
                            <th>Metode</th>
                            <th>Status</th>
                            <th>Release</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $no = $offset + 1;
                        foreach ($transactions as $t): 
                            $s = [
                                'pending' => ['pending', '⏳ Pending', 'Menunggu H+5'],
                                'released' => ['released', '✅ Released', 'Sudah masuk saldo'],
                                'cancelled' => ['cancelled', '❌ Cancelled', 'Dibatalkan'],
                            ][$t['status']] ?? ['pending', $t['status'], ''];
                            
                            $isCash = ($t['payment_type'] ?? 'link') === 'cash';
                        ?>
                            <tr>
                                <td style="color: #999; font-size: 0.8rem;"><?= $no++ ?></td>
                                <td>
                                    <div style="font-weight: 600; color: #003D7A; font-size: 0.85rem;">
                                        <?= date('d/m/Y', strtotime($t['created_at'])) ?>
                                    </div>
                                    <div style="font-size: 0.72rem; color: #999;">
                                        <?= date('H:i', strtotime($t['created_at'])) ?> WIB
                                    </div>
                                </td>
                                <td>
                                    <div class="customer-cell">
                                        <div class="customer-avatar">
                                            <?= strtoupper(substr($t['customer_name'], 0, 1)) ?>
                                        </div>
                                        <div>
                                            <div class="customer-name"><?= htmlspecialchars($t['customer_name']) ?></div>
                                            <?php if (!empty($t['transaction_id'])): ?>
                                                <div class="customer-meta" title="<?= htmlspecialchars($t['transaction_id']) ?>">
                                                    TRX: <?= htmlspecialchars(substr($t['transaction_id'], 0, 12)) ?>...
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <code style="background: #f8fafc; padding: 3px 8px; border-radius: 6px; font-size: 0.78rem; border-left: 3px solid #0066CC;">
                                        <?= htmlspecialchars($t['bill_number']) ?>
                                    </code>
                                </td>
                                <td>
                                    <div class="amount">Rp <?= number_format($t['amount'], 0, ',', '.') ?></div>
                                </td>
                                <td>
                                    <span class="badge-modern <?= $isCash ? 'cash' : 'link' ?>">
                                        <i class="bi bi-<?= $isCash ? 'cash-stack' : 'link-45deg' ?>"></i>
                                        <?= $isCash ? 'Cash' : 'Link' ?>
                                    </span>
                                </td>
                                <td>
                                    <div style="font-size: 0.82rem; color: #333;">
                                        <?= htmlspecialchars($t['payment_method'] ?? '-') ?>
                                    </div>
                                    <?php if (!empty($t['payment_channel'])): ?>
                                        <div style="font-size: 0.72rem; color: #999;">
                                            <?= htmlspecialchars($t['payment_channel']) ?>
                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <span class="badge-modern <?= $s[0] ?>" title="<?= $s[2] ?>">
                                        <?= $s[1] ?>
                                    </span>
                                </td>
                                <td>
                                    <?php if ($isCash): ?>
                                        <div style="font-size: 0.82rem; color: #6a1b9a; font-weight: 600;">
                                            💵 Langsung
                                        </div>
                                        <div style="font-size: 0.7rem; color: #999;">
                                            (Cash tidak pending)
                                        </div>
                                    <?php elseif ($t['status'] === 'released'): ?>
                                        <div style="font-size: 0.82rem; color: #00C853; font-weight: 600;">
                                            ✅ <?= date('d/m/Y', strtotime($t['released_at'])) ?>
                                        </div>
                                    <?php elseif ($t['status'] === 'pending'): ?>
                                        <div style="font-size: 0.82rem; color: #FF9900; font-weight: 600;">
                                            ⏳ <?= date('d/m/Y', strtotime($t['pending_until'])) ?>
                                        </div>
                                        <?php
                                            $daysLeft = ceil((strtotime($t['pending_until']) - time()) / 86400);
                                            if ($daysLeft > 0):
                                        ?>
                                            <div style="font-size: 0.7rem; color: #999;">
                                                (<?= $daysLeft ?> hari lagi)
                                            </div>
                                        <?php else: ?>
                                            <div style="font-size: 0.7rem; color: #00C853; font-weight: 600;">
                                                (segera)
                                            </div>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <span style="color: #ccc;">-</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="action-buttons" style="justify-content: center;">
                                        <button type="button" class="btn-action view" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#detailModal<?= $t['id'] ?>"
                                                title="Detail">
                                            <i class="bi bi-eye-fill"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            <!-- Modal Detail -->
                            <div class="modal fade modal-modern" id="detailModal<?= $t['id'] ?>" 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"></i>
                                                <span>Detail Transaksi</span>
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                                                <div>
                                                    <h6 style="color: #666; font-size: 0.85rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">
                                                        <i class="bi bi-credit-card"></i> Informasi Pembayaran
                                                    </h6>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-receipt"></i> No. Tagihan</div>
                                                        <div class="detail-value"><strong><?= htmlspecialchars($t['bill_number']) ?></strong></div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-person"></i> Pelanggan</div>
                                                        <div class="detail-value"><strong><?= htmlspecialchars($t['customer_name']) ?></strong></div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-cash"></i> Jumlah</div>
                                                        <div class="detail-value"><strong style="color: #0066CC;">Rp <?= number_format($t['amount'], 0, ',', '.') ?></strong></div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-credit-card-2-front"></i> Tipe Bayar</div>
                                                        <div class="detail-value">
                                                            <span class="badge-modern <?= $isCash ? 'cash' : 'link' ?>">
                                                                <i class="bi bi-<?= $isCash ? 'cash-stack' : 'link-45deg' ?>"></i>
                                                                <?= $isCash ? 'Cash (Tunai)' : 'Link (Online)' ?>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-credit-card"></i> Metode</div>
                                                        <div class="detail-value"><?= htmlspecialchars($t['payment_method'] ?? '-') ?></div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-broadcast"></i> Channel</div>
                                                        <div class="detail-value"><?= htmlspecialchars($t['payment_channel'] ?? '-') ?></div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-hash"></i> Transaction ID</div>
                                                        <div class="detail-value"><code><?= htmlspecialchars($t['transaction_id'] ?? '-') ?></code></div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 style="color: #666; font-size: 0.85rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">
                                                        <i class="bi bi-clock-history"></i> Status & Waktu
                                                    </h6>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-calendar3"></i> Tanggal</div>
                                                        <div class="detail-value"><?= date('d/m/Y H:i:s', strtotime($t['created_at'])) ?> WIB</div>
                                                    </div>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-flag"></i> Status</div>
                                                        <div class="detail-value"><span class="badge-modern <?= $s[0] ?>"><?= $s[1] ?></span></div>
                                                    </div>
                                                    <?php if (!$isCash): ?>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-hourglass-split"></i> Masa Tunggu</div>
                                                        <div class="detail-value">s/d <?= date('d/m/Y H:i', strtotime($t['pending_until'])) ?> WIB</div>
                                                    </div>
                                                    <?php endif; ?>
                                                    <div class="detail-row">
                                                        <div class="detail-label"><i class="bi bi-check-circle"></i> Released</div>
                                                        <div class="detail-value"><?= $t['released_at'] ? date('d/m/Y H:i:s', strtotime($t['released_at'])) . ' WIB' : '-' ?></div>
                                                    </div>
                                                    
                                                    <?php if ($isCash): ?>
                                                        <div class="info-box-modal" style="background: #f3e5f5; border-left-color: #9C27B0; color: #6a1b9a; margin-top: 12px;">
                                                            <i class="bi bi-cash-stack"></i>
                                                            <div>
                                                                <strong>Pembayaran Cash:</strong><br>
                                                                Dana diterima langsung oleh cabang dan <strong>langsung masuk Saldo Tersedia</strong> tanpa masa tunggu H+5.
                                                            </div>
                                                        </div>
                                                    <?php elseif ($t['status'] === 'pending'): ?>
                                                        <div class="info-box-modal" style="margin-top: 12px;">
                                                            <i class="bi bi-hourglass-split"></i>
                                                            <div>
                                                                Saldo akan otomatis masuk ke <strong>Saldo Tersedia</strong> pada:<br>
                                                                <strong><?= date('d F Y, H:i', strtotime($t['pending_until'])) ?> WIB</strong>
                                                            </div>
                                                        </div>
                                                    <?php elseif ($t['status'] === 'released'): ?>
                                                        <div class="info-box-modal" style="background: #e8f5e9; border-left-color: #00C853; color: #2e7d32; margin-top: 12px;">
                                                            <i class="bi bi-check-circle-fill"></i>
                                                            <div>
                                                                Saldo sudah masuk ke <strong>Saldo Tersedia</strong> dan dapat diajukan penarikan.
                                                            </div>
                                                        </div>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn-modal secondary" data-bs-dismiss="modal">Tutup</button>
                                            <a href="?tab=withdrawal" class="btn-modal success">
                                                <i class="bi bi-send"></i> Ajukan Penarikan
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <?php if ($totalPages > 1): ?>
            <div class="pagination-modern">
                <?php
                $qp = $_GET;
                unset($qp['page']);
                $bq = http_build_query($qp);
                $bq = $bq ? $bq . '&' : '';
                ?>
                <a href="?<?= $bq ?>page=1" class="<?= $page <= 1 ? 'disabled' : '' ?>">«</a>
                <?php for ($i = max(1, $page-2); $i <= min($totalPages, $page+2); $i++): ?>
                    <a href="?<?= $bq ?>page=<?= $i ?>" class="<?= $i == $page ? 'active' : '' ?>"><?= $i ?></a>
                <?php endfor; ?>
                <a href="?<?= $bq ?>page=<?= $totalPages ?>" class="<?= $page >= $totalPages ? 'disabled' : '' ?>">»</a>
            </div>
            <?php endif; ?>

        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ============================================================ -->
    <!-- TAB 3: PENARIKAN -->
    <!-- ============================================================ -->
    <?php if ($activeTab === 'withdrawal'): ?>
    <div class="row g-3">
        <!-- Form Penarikan -->
        <div class="col-lg-5">
            <div class="withdrawal-form-card">
                <div class="withdrawal-form-header">
                    <i class="bi bi-send-fill"></i>
                    <span>Ajukan Penarikan ke Pusat</span>
                </div>
                <div class="withdrawal-form-body">
                    <?php if ($balance['available_balance'] < 50000): ?>
                        <div class="alert-modern warning" style="margin: 0;">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            <div>
                                Saldo tersedia <strong>Rp <?= number_format($balance['available_balance'], 0, ',', '.') ?></strong>. 
                                Minimum penarikan <strong>Rp 50.000</strong>.
                            </div>
                        </div>
                    <?php elseif (empty($verifiedBankAccounts)): ?>
                        <div class="alert-modern warning" style="margin: 0;">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            <div>
                                <strong>Belum ada rekening bank terverifikasi.</strong><br>
                                Silakan tambahkan rekening bank di tab <a href="?tab=bank_accounts" style="color: #f57c00; font-weight: 700;">Rekening Bank</a> dan tunggu verifikasi Super Admin.
                            </div>
                        </div>
                    <?php else: ?>
                        <form method="POST" onsubmit="return confirm('Ajukan penarikan? Data rekening harus benar!')">
                            <?= csrfField() ?>
                            <input type="hidden" name="action" value="request_withdrawal">
                            
                            <div class="balance-info-box">
                                <div class="balance-info-label">💰 Saldo Tersedia</div>
                                <div class="balance-info-value">Rp <?= number_format($balance['available_balance'], 0, ',', '.') ?></div>
                            </div>
                            
                            <!-- Pilih Rekening Bank -->
                            <div class="form-group-withdrawal" style="margin-bottom: 14px;">
                                <label class="form-label-withdrawal">
                                    <i class="bi bi-bank"></i>
                                    Rekening Tujuan <span class="required">*</span>
                                </label>
                                <div class="bank-account-list">
                                    <?php foreach ($verifiedBankAccounts as $ba): ?>
                                        <label class="bank-account-card" style="cursor: pointer;">
                                            <input type="radio" name="bank_account_id" value="<?= $ba['id'] ?>" 
                                                   class="bank-radio" required
                                                   onchange="updateSelectedBank(this)">
                                            <div class="bank-icon">
                                                <i class="bi bi-bank"></i>
                                            </div>
                                            <div class="bank-info">
                                                <div class="bank-name"><?= htmlspecialchars($ba['bank_name']) ?></div>
                                                <div class="bank-detail">
                                                    <code><?= htmlspecialchars($ba['account_number']) ?></code>
                                                    <span>•</span>
                                                    <span>a.n. <?= htmlspecialchars($ba['account_holder']) ?></span>
                                                </div>
                                            </div>
                                            <span class="bank-status-badge verified">
                                                <i class="bi bi-check-circle-fill"></i> Verified
                                            </span>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                                <?php if (!empty($pendingBankAccounts)): ?>
                                    <small style="font-size: 0.72rem; color: #999; margin-top: 6px; display: block;">
                                        <i class="bi bi-info-circle"></i> 
                                        Ada <?= count($pendingBankAccounts) ?> rekening menunggu verifikasi (tidak bisa dipilih).
                                    </small>
                                <?php endif; ?>
                            </div>
                            
                            <div class="form-grid-withdrawal single">
                                <div class="form-group-withdrawal">
                                    <label class="form-label-withdrawal">
                                        <i class="bi bi-cash-coin"></i>
                                        Jumlah Penarikan (Rp) <span class="required">*</span>
                                    </label>
                                    <input type="number" name="amount" class="form-control-withdrawal" required
                                           min="50000" max="<?= (int)$balance['available_balance'] ?>"
                                           step="1000" placeholder="Min. 50.000">
                                    <small style="font-size: 0.72rem; color: #999; margin-top: 4px; display: block;">
                                        Min: Rp 50.000 | Maks: Rp <?= number_format($balance['available_balance'], 0, ',', '.') ?>
                                    </small>
                                </div>
                            </div>
                            
                            <div class="form-grid-withdrawal single">
                                <div class="form-group-withdrawal">
                                    <label class="form-label-withdrawal">
                                        <i class="bi bi-chat-left-text"></i>
                                        Catatan (Opsional)
                                    </label>
                                    <textarea name="notes" class="form-control-withdrawal" rows="2" 
                                              placeholder="Catatan tambahan untuk pusat..."></textarea>
                                </div>
                            </div>
                            
                            <button type="submit" class="btn-withdraw">
                                <i class="bi bi-send-fill"></i>
                                <span>Ajukan Penarikan</span>
                            </button>
                        </form>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Info Penarikan -->
            <div class="card-modern">
                <div class="card-header-modern info">
                    <div class="title-left">
                        <i class="bi bi-info-circle-fill"></i>
                        <span>Informasi Penarikan</span>
                    </div>
                </div>
                <div class="card-body-modern" style="font-size: 0.85rem; color: #555;">
                    <ul style="margin: 0; padding-left: 20px;">
                        <li style="margin-bottom: 6px;">Dana akan ditransfer dalam 1x24 jam setelah disetujui</li>
                        <li style="margin-bottom: 6px;">Anda dapat membatalkan pengajuan yang masih <em>pending</em></li>
                        <li style="margin-bottom: 6px;">Rekening bank harus sudah <strong>terverifikasi</strong> oleh Super Admin</li>
                        <li>Rekening bank hanya perlu didaftarkan <strong>satu kali</strong></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Riwayat Penarikan -->
        <div class="col-lg-7">
            <div class="table-wrapper">
                <div class="table-header" style="background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%);">
                    <div class="table-header-title">
                        <i class="bi bi-clock-history"></i>
                        <span>Riwayat Penarikan</span>
                        <span class="table-header-count"><?= count($withdrawals) ?> pengajuan</span>
                    </div>
                </div>
                
                <?php if (empty($withdrawals)): ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="bi bi-inbox"></i>
                        </div>
                        <h5 class="empty-state-title">Belum ada pengajuan penarikan</h5>
                    </div>
                <?php else: ?>
                    <div class="table-scroll">
                        <table class="table-modern" style="min-width: 700px;">
                            <thead>
                                <tr>
                                    <th>No. Pengajuan</th>
                                    <th>Tanggal</th>
                                    <th>Jumlah</th>
                                    <th>Rekening</th>
                                    <th>Status</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($withdrawals as $w): 
                                    $wb = [
                                        'pending' => ['pending', '⏳ Menunggu'],
                                        'approved' => ['approved', '✅ Disetujui'],
                                        'rejected' => ['rejected', '❌ Ditolak'],
                                        'processed' => ['processed', '💰 Ditransfer'],
                                    ][$w['status']] ?? ['pending', $w['status']];
                                ?>
                                    <tr>
                                        <td>
                                            <code style="background: #f8fafc; padding: 3px 8px; border-radius: 6px; font-size: 0.78rem; border-left: 3px solid #00B8D4;">
                                                <?= htmlspecialchars($w['withdrawal_number']) ?>
                                            </code>
                                        </td>
                                        <td>
                                            <div style="font-size: 0.85rem; font-weight: 600; color: #003D7A;">
                                                <?= date('d/m/Y', strtotime($w['requested_at'])) ?>
                                            </div>
                                            <div style="font-size: 0.72rem; color: #999;">
                                                <?= date('H:i', strtotime($w['requested_at'])) ?> WIB
                                            </div>
                                        </td>
                                        <td>
                                            <div class="amount">Rp <?= number_format($w['amount'], 0, ',', '.') ?></div>
                                        </td>
                                        <td>
                                            <div style="font-size: 0.85rem; font-weight: 600; color: #003D7A;">
                                                <?= htmlspecialchars($w['bank_name']) ?>
                                            </div>
                                            <code style="font-size: 0.75rem; background: #f8fafc; padding: 2px 6px; border-radius: 4px;">
                                                <?= htmlspecialchars($w['account_number']) ?>
                                            </code>
                                            <div style="font-size: 0.72rem; color: #999; margin-top: 2px;">
                                                a.n. <?= htmlspecialchars($w['account_holder']) ?>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge-modern <?= $wb[0] ?>"><?= $wb[1] ?></span>
                                            <?php if ($w['review_notes']): ?>
                                                <div style="font-size: 0.72rem; color: #999; margin-top: 3px; font-style: italic;" 
                                                     title="<?= htmlspecialchars($w['review_notes']) ?>">
                                                    💬 <?= htmlspecialchars(substr($w['review_notes'], 0, 25)) ?><?= strlen($w['review_notes']) > 25 ? '...' : '' ?>
                                                </div>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <div class="action-buttons" style="justify-content: center;">
                                                <?php if ($w['status'] === 'pending'): ?>
                                                    <form method="POST" style="display: inline; margin: 0;" 
                                                          onsubmit="return confirm('Batalkan pengajuan ini?')">
                                                        <?= csrfField() ?>
                                                        <input type="hidden" name="action" value="cancel_withdrawal">
                                                        <input type="hidden" name="withdrawal_id" value="<?= $w['id'] ?>">
                                                        <button type="submit" class="btn-action cancel" title="Batalkan">
                                                            <i class="bi bi-x-lg"></i>
                                                        </button>
                                                    </form>
                                                <?php elseif ($w['status'] === 'processed'): ?>
                                                    <div style="font-size: 0.78rem; color: #00C853; font-weight: 600;">
                                                        <?= date('d/m/Y', strtotime($w['processed_at'])) ?>
                                                    </div>
                                                <?php else: ?>
                                                    <span style="color: #ccc;">-</span>
                                                <?php endif; ?>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ============================================================ -->
    <!-- TAB 4: REKENING BANK -->
    <!-- ============================================================ -->
    <?php if ($activeTab === 'bank_accounts'): ?>
    <div class="row g-3">
        <!-- Form Tambah Bank -->
        <div class="col-lg-5">
            <div class="card-modern">
                <div class="card-header-modern purple">
                    <div class="title-left">
                        <i class="bi bi-bank"></i>
                        <span>Tambah Rekening Bank</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <div class="info-box-modal warning" style="margin-top: 0; margin-bottom: 16px;">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <div>
                            <strong>Penting:</strong> Rekening bank hanya perlu didaftarkan <strong>satu kali</strong>. 
                            Setelah diverifikasi Super Admin, rekening dapat digunakan untuk penarikan dana selanjutnya.
                            <br><br>
                            <strong>Syarat verifikasi:</strong> Upload foto KTP dan Buku Rekening/M-Banking yang menampilkan nama terang.
                        </div>
                    </div>
                    
                    <form method="POST" enctype="multipart/form-data" onsubmit="return validateBankForm()">
                        <?= csrfField() ?>
                        <input type="hidden" name="action" value="add_bank_account">
                        
                        <div class="form-grid-withdrawal">
                            <div class="form-group-withdrawal">
                                <label class="form-label-withdrawal">
                                    <i class="bi bi-bank"></i>
                                    Nama Bank <span class="required">*</span>
                                </label>
                                <select name="bank_name" class="form-select-withdrawal" required>
                                    <option value="">-- Pilih Bank --</option>
                                    <option value="BCA">BCA</option>
                                    <option value="BRI">BRI</option>
                                    <option value="BNI">BNI</option>
                                    <option value="Mandiri">Mandiri</option>
                                    <option value="BSI">BSI</option>
                                    <option value="CIMB">CIMB Niaga</option>
                                    <option value="Danamon">Danamon</option>
                                    <option value="Permata">Permata</option>
                                    <option value="OCBC">OCBC NISP</option>
                                    <option value="Panin">Panin Bank</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                            <div class="form-group-withdrawal">
                                <label class="form-label-withdrawal">
                                    <i class="bi bi-credit-card"></i>
                                    No. Rekening <span class="required">*</span>
                                </label>
                                <input type="text" name="account_number" class="form-control-withdrawal" required
                                       placeholder="Contoh: 1234567890">
                            </div>
                        </div>
                        
                        <div class="form-grid-withdrawal single">
                            <div class="form-group-withdrawal">
                                <label class="form-label-withdrawal">
                                    <i class="bi bi-person-badge"></i>
                                    Nama Pemilik Rekening <span class="required">*</span>
                                </label>
                                <input type="text" name="account_holder" class="form-control-withdrawal" required
                                       placeholder="Sesuai di buku rekening">
                                <small style="font-size: 0.72rem; color: #999; margin-top: 4px; display: block;">
                                    <i class="bi bi-info-circle"></i>
                                    Harus sama persis dengan nama di KTP dan buku rekening
                                </small>
                            </div>
                        </div>
                        
                        <!-- Upload KTP -->
                        <div class="file-upload-group">
                            <label class="file-upload-label">
                                <i class="bi bi-person-vcard"></i>
                                Foto KTP <span class="required">*</span>
                            </label>
                            <label class="file-upload-area" for="ktpUpload">
                                <i class="bi bi-cloud-arrow-up"></i>
                                <div class="upload-text">Klik untuk upload foto KTP</div>
                                <div class="upload-hint">Format: JPG/PNG • Maks: 5MB • Pastikan NIK & nama terlihat jelas</div>
                                <input type="file" id="ktpUpload" name="ktp_photo" accept="image/jpeg,image/png,image/jpg" required
                                       onchange="previewFile(this, 'ktpPreview')">
                            </label>
                            <div class="file-preview" id="ktpPreview">
                                <img src="" alt="Preview KTP">
                                <div class="file-preview-info">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>File berhasil dipilih</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Upload Buku Rekening -->
                        <div class="file-upload-group">
                            <label class="file-upload-label">
                                <i class="bi bi-journal-text"></i>
                                Foto Buku Rekening / M-Banking <span class="required">*</span>
                            </label>
                            <label class="file-upload-area" for="bukuUpload">
                                <i class="bi bi-cloud-arrow-up"></i>
                                <div class="upload-text">Klik untuk upload foto Buku Rekening/M-Banking</div>
                                <div class="upload-hint">Format: JPG/PNG • Maks: 5MB • Pastikan nama & no. rekening terlihat</div>
                                <input type="file" id="bukuUpload" name="buku_rek_photo" accept="image/jpeg,image/png,image/jpg" required
                                       onchange="previewFile(this, 'bukuPreview')">
                            </label>
                            <div class="file-preview" id="bukuPreview">
                                <img src="" alt="Preview Buku Rekening">
                                <div class="file-preview-info">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>File berhasil dipilih</span>
                                </div>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn-withdraw" style="background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);">
                            <i class="bi bi-plus-circle-fill"></i>
                            <span>Daftarkan Rekening</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Daftar Rekening Bank -->
        <div class="col-lg-7">
            <div class="card-modern">
                <div class="card-header-modern purple">
                    <div class="title-left">
                        <i class="bi bi-list-ul"></i>
                        <span>Daftar Rekening Bank</span>
                        <span style="background: rgba(255,255,255,0.25); padding: 3px 10px; border-radius: 10px; font-size: 0.78rem;">
                            <?= count($bankAccounts) ?> rekening
                        </span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <?php if (empty($bankAccounts)): ?>
                        <div class="empty-state" style="padding: 30px 20px;">
                            <div class="empty-state-icon">
                                <i class="bi bi-bank"></i>
                            </div>
                            <h5 class="empty-state-title">Belum ada rekening bank</h5>
                            <p class="empty-state-subtitle">Daftarkan rekening bank untuk mulai mengajukan penarikan dana</p>
                        </div>
                    <?php else: ?>
                        <div class="bank-account-list">
                            <?php foreach ($bankAccounts as $ba): ?>
                                <div class="bank-account-card <?= $ba['is_verified'] ? '' : 'unverified' ?>">
                                    <div class="bank-icon <?= $ba['is_verified'] ? '' : 'unverified' ?>">
                                        <i class="bi bi-bank"></i>
                                    </div>
                                    <div class="bank-info">
                                        <div class="bank-name">
                                            <?= htmlspecialchars($ba['bank_name']) ?>
                                            <span class="bank-status-badge <?= $ba['is_verified'] ? 'verified' : 'pending' ?>" style="margin-left: 6px;">
                                                <?php if ($ba['is_verified']): ?>
                                                    <i class="bi bi-check-circle-fill"></i> Terverifikasi
                                                <?php else: ?>
                                                    <i class="bi bi-hourglass-split"></i> Menunggu Verifikasi
                                                <?php endif; ?>
                                            </span>
                                        </div>
                                        <div class="bank-detail">
                                            <code><?= htmlspecialchars($ba['account_number']) ?></code>
                                            <span>•</span>
                                            <span>a.n. <?= htmlspecialchars($ba['account_holder']) ?></span>
                                        </div>
                                        <div style="font-size: 0.7rem; color: #999; margin-top: 4px;">
                                            <i class="bi bi-calendar3"></i> 
                                            Terdaftar: <?= date('d/m/Y H:i', strtotime($ba['created_at'])) ?>
                                            <?php if ($ba['is_verified'] && $ba['verified_at']): ?>
                                                • Verified: <?= date('d/m/Y', strtotime($ba['verified_at'])) ?>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="info-box-modal" style="margin-top: 16px; margin-bottom: 0;">
                            <i class="bi bi-info-circle-fill"></i>
                            <div>
                                <strong>Catatan:</strong> Rekening yang belum terverifikasi tidak dapat digunakan untuk penarikan dana. 
                                Silakan hubungi Super Admin untuk mempercepat proses verifikasi.
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

</div>
</div>
<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar && overlay) {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}

// Preview file upload
function previewFile(input, previewId) {
    const preview = document.getElementById(previewId);
    const img = preview.querySelector('img');
    
    if (input.files && input.files[0]) {
        // Validasi ukuran
        if (input.files[0].size > 5 * 1024 * 1024) {
            alert('Ukuran file maksimal 5MB');
            input.value = '';
            preview.style.display = 'none';
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}

// Validasi form bank
function validateBankForm() {
    const ktp = document.getElementById('ktpUpload');
    const buku = document.getElementById('bukuUpload');
    
    if (!ktp.files || !ktp.files[0]) {
        alert('Upload foto KTP wajib');
        return false;
    }
    
    if (!buku.files || !buku.files[0]) {
        alert('Upload foto Buku Rekening/M-Banking wajib');
        return false;
    }
    
    return confirm('Pastikan data rekening sudah benar dan foto KTP serta Buku Rekening jelas terbaca. Lanjutkan?');
}

// Update selected bank card
function updateSelectedBank(radio) {
    document.querySelectorAll('.bank-account-card').forEach(card => {
        card.classList.remove('selected');
    });
    radio.closest('.bank-account-card').classList.add('selected');
}
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>