<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/Withdrawal.php';
require_once __DIR__ . '/../classes/BranchBalance.php';
requireRole('super_admin');
$pageTitle = 'Approval Penarikan';

$success = '';
$error = '';

// Handle approve/reject
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    $action = $_POST['action'] ?? '';
    $withdrawalId = (int) ($_POST['withdrawal_id'] ?? 0);
    
    if ($withdrawalId > 0) {
        if ($action === 'approve') {
            $result = Withdrawal::approve($withdrawalId, currentUserId());
            if ($result['success']) {
                logActivity(currentUserId(), 'approve_withdrawal', "Approve penarikan #$withdrawalId");
                redirect('/admin/withdrawals.php', '✅ Request penarikan berhasil disetujui');
            } else {
                $error = $result['error'];
            }
        } elseif ($action === 'reject') {
            $reason = trim($_POST['reason'] ?? '');
            $result = Withdrawal::reject($withdrawalId, currentUserId(), $reason);
            if ($result['success']) {
                logActivity(currentUserId(), 'reject_withdrawal', "Reject penarikan #$withdrawalId");
                redirect('/admin/withdrawals.php', '✅ Request penarikan ditolak');
            } else {
                $error = $result['error'];
            }
        }
    }
}

$statusFilter = $_GET['status'] ?? '';
$branchFilter = $_GET['branch'] ?? '';

try {
    $withdrawals = Withdrawal::getAll($statusFilter, $branchFilter ?: null);
    $allBalances = BranchBalance::getAllBalances();
} catch (\Throwable $e) {
    $withdrawals = [];
    $allBalances = [];
    $error = 'Error loading data: ' . $e->getMessage();
}

$db = db();
$branches = $db->query("SELECT id, name FROM branches ORDER BY name")->fetchAll();

// ============================================================================
// ENRICH WITHDRAWALS WITH BANK ACCOUNT INFO (KTP + BUKU REKENING PHOTOS)
// ============================================================================
foreach ($withdrawals as &$w) {
    $w['ktp_photo'] = null;
    $w['buku_rek_photo'] = null;
    $w['bank_verified'] = false;
    $w['bank_account_id'] = null;
    
    try {
        $stmt = $db->prepare("
            SELECT id, ktp_photo, buku_rek_photo, is_verified 
            FROM branch_bank_accounts 
            WHERE branch_id = ? AND account_number = ?
            LIMIT 1
        ");
        $stmt->execute([$w['branch_id'] ?? 0, $w['account_number'] ?? '']);
        $bankAcc = $stmt->fetch();
        
        if ($bankAcc) {
            $w['bank_account_id'] = $bankAcc['id'];
            $w['ktp_photo'] = $bankAcc['ktp_photo'];
            $w['buku_rek_photo'] = $bankAcc['buku_rek_photo'];
            $w['bank_verified'] = (bool)$bankAcc['is_verified'];
        }
    } catch (\Throwable $e) {}
}
unset($w);

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

<style>
/* === NAVBAR MODERN === */


/* === MAIN CONTENT === */

.page-header {
    margin-bottom: 25px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.page-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
}

/* === SUMMARY CARDS === */
.summary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
}

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

.summary-card-title {
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.summary-card-balance {
    font-size: 1.5rem;
    font-weight: 800;
    color: #003D7A;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.summary-card-footer {
    display: flex;
    gap: 15px;
    padding-top: 12px;
    border-top: 1px dashed #e8f4f8;
}

.summary-stat {
    flex: 1;
    min-width: 0;
}

.summary-stat-label {
    display: block;
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: 600;
}

.summary-stat-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #003D7A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-stat-value.income { color: #00C853; }
.summary-stat-value.withdrawn { color: #FF9900; }

/* === 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 {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 18px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

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

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

/* === FILTER === */
.filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    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.85rem;
}

.form-select-modern {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

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

.filter-actions { display: flex; gap: 8px; }

.btn-filter {
    padding: 10px 18px;
    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;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.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.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

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

.btn-filter.outline:hover {
    background: #f8fafc;
    border-color: #0066CC;
    color: #0066CC;
}

/* === TABLE === */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    min-width: 1100px;
}

.table-modern thead { background: #f8fafc; }

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

.table-modern td {
    padding: 14px 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; }

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

.data-value {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
}

.data-value.amount {
    color: #0066CC;
    font-weight: 800;
}

.data-sub {
    font-size: 0.78rem;
    color: #999;
    margin-top: 2px;
}

.bank-info {
    background: #f8fafc;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    border-left: 3px solid #0066CC;
}

.bank-info strong { color: #003D7A; }

/* === VERIFICATION BADGE === */
.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-top: 4px;
}

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

.verification-badge.unverified {
    background: #fff3cd;
    color: #856404;
}

.verification-badge.not-found {
    background: #f8d7da;
    color: #842029;
}

/* === PHOTO PREVIEW === */
.photo-preview-group {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.photo-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e8f4f8;
    transition: all 0.3s ease;
    position: relative;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-thumb:hover {
    border-color: #0066CC;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-thumb .photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.55rem;
    text-align: center;
    padding: 1px 2px;
    font-weight: 600;
}

.photo-thumb.no-photo {
    background: #fff3cd;
    border-color: #ffe69c;
}

.photo-thumb.no-photo i {
    color: #856404;
    font-size: 1.2rem;
}

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

.badge-modern.pending { background: #fff3cd; color: #856404; border: 1px solid #ffe69c; }
.badge-modern.approved { background: #d1e7dd; color: #0f5132; border: 1px solid #a3cfbb; }
.badge-modern.rejected { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; }

.rejection-reason {
    margin-top: 6px;
    padding: 6px 10px;
    background: #ffe6e6;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #842029;
    font-style: italic;
}

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

.btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-action.approve { background: #d1e7dd; color: #0f5132; }
.btn-action.approve:hover {
    background: #00C853;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.btn-action.reject { background: #f8d7da; color: #842029; }
.btn-action.reject:hover {
    background: #DC3545;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-action.view-photo {
    background: #cfe2ff;
    color: #084298;
}

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

/* === MOBILE CARD VIEW === */
.mobile-cards { display: none; }

.mobile-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e8f4f8;
}

.mobile-card-branch { flex: 1; min-width: 0; }

.mobile-card-branch-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 1rem;
    margin-bottom: 2px;
}

.mobile-card-branch-code {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-card-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0066CC;
    text-align: right;
}

.mobile-card-amount small {
    display: block;
    font-size: 0.7rem;
    color: #999;
    font-weight: 500;
    margin-top: 2px;
}

.mobile-card-body {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
}

.mobile-card-row .label {
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 70px;
}

.mobile-card-row .value {
    color: #333;
    font-weight: 600;
    text-align: right;
    flex: 1;
    min-width: 0;
}

/* === MOBILE PHOTO PREVIEW === */
.mobile-photo-section {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px;
    margin: 8px 0;
}

.mobile-photo-title {
    font-size: 0.72rem;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-photo-item {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e8f4f8;
    transition: all 0.3s ease;
    position: relative;
    aspect-ratio: 4/3;
    background: white;
}

.mobile-photo-item:hover {
    border-color: #0066CC;
    transform: scale(1.02);
}

.mobile-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-photo-item .photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 0.7rem;
    text-align: center;
    padding: 4px;
    font-weight: 600;
}

.mobile-photo-item.no-photo {
    background: #fff3cd;
    border-color: #ffe69c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    aspect-ratio: auto;
    padding: 16px 8px;
}

.mobile-photo-item.no-photo i {
    color: #856404;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.mobile-photo-item.no-photo span {
    color: #856404;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}

.mobile-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e8f4f8;
}

.mobile-card-footer .btn-action {
    flex: 1;
    width: auto;
    height: 40px;
    font-size: 0.85rem;
    gap: 6px;
    justify-content: center;
}

.mobile-card-footer .btn-action span { font-weight: 600; }

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

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

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

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

/* === ALERT MODERN === */
.alert-modern {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    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.3rem;
    margin-top: 2px;
}

/* === 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, #DC3545 0%, #FF6B7A 100%);
    color: white;
    padding: 18px 24px;
    border: none;
}

.modal-modern .modal-header.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
}

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

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

.modal-modern .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #f8fafc;
}

.form-group-modern { margin-bottom: 16px; }

.form-label-modern {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-control-modern {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8f4f8;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
}

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

.btn-modal {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

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

.btn-modal.danger {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-modal.danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

/* === PHOTO VIEWER MODAL === */
.photo-viewer-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.photo-viewer-modal .modal-header {
    background: rgba(0,0,0,0.8);
    color: white;
    border: none;
    padding: 12px 20px;
}

.photo-viewer-modal .modal-body {
    padding: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.photo-viewer-modal .modal-body img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.photo-viewer-modal .modal-footer {
    background: rgba(0,0,0,0.8);
    border: none;
    padding: 12px 20px;
    justify-content: center;
}

.photo-viewer-modal .photo-caption {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-actions {
        grid-column: 1 / -1;
    }
    
    .filter-actions .btn-filter { flex: 1; }
}


    
    .page-title {
        font-size: 1.4rem;
        flex-wrap: wrap;
    }
    
    .page-title i { font-size: 1.6rem; }
    
    .summary-card { padding: 16px; }
    .summary-card-balance { font-size: 1.3rem; }
    
    .summary-card-footer {
        flex-direction: column;
        gap: 8px;
    }
    
    .desktop-table { display: none; }
    .mobile-cards { display: block; }
    
    .card-header-modern {
        padding: 15px 18px;
        font-size: 1rem;
    }
    
    .card-body-modern { padding: 16px; }
    
    .filter-form { grid-template-columns: 1fr; }
    
    .alert-modern {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .filter-actions {
        flex-direction: column;
    }
    
    .filter-actions .btn-filter { width: 100%; }
    
    .photo-thumb {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .navbar-modern { padding: 10px 12px; }
    .burger-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    .navbar-title { font-size: 0.95rem; }
    .main-content { padding: 12px; }
    
    .page-title {
        font-size: 1.2rem;
        gap: 8px;
    }
    
    .page-subtitle { font-size: 0.85rem; }
    
    .summary-card { padding: 14px; }
    .summary-card-title { font-size: 0.8rem; }
    .summary-card-balance { font-size: 1.15rem; }
    
    .summary-stat-label { font-size: 0.65rem; }
    .summary-stat-value { font-size: 0.75rem; }
    
    .card-header-modern {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .card-body-modern { padding: 14px; }
    
    .mobile-card { padding: 14px; }
    .mobile-card-branch-name { font-size: 0.95rem; }
    .mobile-card-amount { font-size: 1rem; }
    .mobile-card-row { font-size: 0.8rem; }
}
</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>
        <h1 class="navbar-title">Approval Penarikan</h1>
    </div>
    <div class="navbar-right">
        <span class="navbar-badge">
            <i class="bi bi-shield-check"></i> Super Admin
        </span>
    </div>
</div>

    <!-- Page Header -->
    <div class="page-header">
     
        <h2 class="page-title">
            <i class="bi bi-cash-stack"></i>
            <span>Approval Penarikan Saldo</span>
        </h2>
        <p class="page-subtitle">Kelola dan setujui request penarikan dari cabang</p>
    </div>
    
    <?= flashMessage() ?>
    
    <?php if ($error): ?>
        <div class="alert-modern danger">
            <i class="bi bi-exclamation-circle-fill"></i>
            <div><?= htmlspecialchars($error) ?></div>
        </div>
    <?php endif; ?>
    
    <!-- Info Penting -->
    <div class="alert-modern info">
        <i class="bi bi-info-circle-fill"></i>
        <div>
            <strong>Verifikasi Dokumen:</strong> Sebelum menyetujui penarikan, pastikan Anda telah memeriksa:
            <ul style="margin: 6px 0 0 0; padding-left: 20px;">
                <li>Foto KTP pemilik rekening (harus jelas & nama sesuai)</li>
                <li>Foto Buku Rekening/M-Banking (nama & nomor rekening harus cocok)</li>
                <li>Status verifikasi rekening bank (✅ = sudah diverifikasi)</li>
            </ul>
        </div>
    </div>
    
    <!-- Summary Cards -->
    <?php if (!empty($allBalances)): ?>
        <div class="row g-3 mb-4">
            <?php foreach ($allBalances as $bal): ?>
                <div class="col-lg-3 col-md-6">
                    <div class="summary-card">
                        <div class="summary-card-header">
                            <h6 class="summary-card-title">
                                <i class="bi bi-building"></i>
                                <?= htmlspecialchars($bal['branch_name'] ?? 'Unknown') ?>
                            </h6>
                            <div class="summary-card-icon">
                                <i class="bi bi-wallet2"></i>
                            </div>
                        </div>
                        <div class="summary-card-balance">
                            Rp <?= number_format($bal['balance'] ?? 0, 0, ',', '.') ?>
                        </div>
                        <div class="summary-card-footer">
                            <div class="summary-stat">
                                <span class="summary-stat-label">Income</span>
                                <span class="summary-stat-value income">
                                    +Rp <?= number_format($bal['total_income'] ?? 0, 0, ',', '.') ?>
                                </span>
                            </div>
                            <div class="summary-stat">
                                <span class="summary-stat-label">Withdrawn</span>
                                <span class="summary-stat-value withdrawn">
                                    -Rp <?= number_format($bal['total_withdrawn'] ?? 0, 0, ',', '.') ?>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    
    <!-- Filter -->
    <div class="card-modern">
        <div class="card-header-modern">
            <div class="title-left">
                <i class="bi bi-funnel-fill"></i>
                <span>Filter Data</span>
            </div>
        </div>
        <div class="card-body-modern">
            <form method="GET" class="filter-form">
                <div class="form-group-filter">
                    <label class="form-label-filter">Status</label>
                    <select name="status" class="form-select-modern">
                        <option value="">Semua Status</option>
                        <option value="pending" <?= $statusFilter === 'pending' ? 'selected' : '' ?>>⏳ Pending</option>
                        <option value="approved" <?= $statusFilter === 'approved' ? 'selected' : '' ?>>✅ Approved</option>
                        <option value="rejected" <?= $statusFilter === 'rejected' ? 'selected' : '' ?>>❌ Rejected</option>
                    </select>
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">Cabang</label>
                    <select name="branch" class="form-select-modern">
                        <option value="">Semua Cabang</option>
                        <?php foreach ($branches as $b): ?>
                            <option value="<?= $b['id'] ?>" <?= $branchFilter == $b['id'] ? 'selected' : '' ?>>
                                <?= htmlspecialchars($b['name']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="filter-actions">
                    <button type="submit" class="btn-filter primary">
                        <i class="bi bi-search"></i>
                        <span>Filter</span>
                    </button>
                    <a href="/admin/withdrawals.php" class="btn-filter outline">
                        <i class="bi bi-arrow-counterclockwise"></i>
                        <span>Reset</span>
                    </a>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Withdrawals List -->
    <div class="card-modern">
        <div class="card-header-modern">
            <div class="title-left">
                <i class="bi bi-list-check"></i>
                <span>Daftar Request Penarikan</span>
            </div>
            <span class="navbar-badge" style="background: rgba(255,255,255,0.25);">
                <?= count($withdrawals) ?> Request
            </span>
        </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">Tidak ada request penarikan</h5>
                <p class="empty-state-subtitle">Semua request sudah diproses atau belum ada yang masuk</p>
            </div>
        <?php else: ?>
            <!-- Desktop Table View -->
            <div class="desktop-table" style="overflow-x: auto;">
                <table class="table-modern">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Cabang</th>
                            <th>Jumlah</th>
                            <th>Rekening & Dokumen</th>
                            <th>Request oleh</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($withdrawals as $w): ?>
                            <tr>
                                <td>
                                    <div class="data-value" style="font-size: 0.85rem;">
                                        <?= date('d/m/Y', strtotime($w['requested_at'])) ?>
                                    </div>
                                    <div class="data-sub"><?= date('H:i', strtotime($w['requested_at'])) ?> WIB</div>
                                </td>
                                <td>
                                    <div class="data-value"><?= htmlspecialchars($w['branch_name'] ?? '-') ?></div>
                                    <div class="data-sub"><?= htmlspecialchars($w['branch_code'] ?? '-') ?></div>
                                </td>
                                <td>
                                    <div class="data-value amount">
                                        Rp <?= number_format($w['amount'], 0, ',', '.') ?>
                                    </div>
                                </td>
                                <td>
                                    <div class="bank-info">
                                        <strong><?= htmlspecialchars($w['bank_name']) ?></strong><br>
                                        <?= htmlspecialchars($w['account_number']) ?><br>
                                        <span style="color: #666;">a.n. <?= htmlspecialchars($w['account_holder']) ?></span>
                                        
                                        <!-- Verification Badge -->
                                        <?php if ($w['bank_account_id']): ?>
                                            <?php if ($w['bank_verified']): ?>
                                                <div class="verification-badge verified">
                                                    <i class="bi bi-check-circle-fill"></i> Rekening Terverifikasi
                                                </div>
                                            <?php else: ?>
                                                <div class="verification-badge unverified">
                                                    <i class="bi bi-hourglass-split"></i> Menunggu Verifikasi
                                                </div>
                                            <?php endif; ?>
                                        <?php else: ?>
                                            <div class="verification-badge not-found">
                                                <i class="bi bi-exclamation-triangle-fill"></i> Rekening Tidak Ditemukan
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <!-- Photo Preview Thumbnails -->
                                    <div class="photo-preview-group">
                                        <?php if (!empty($w['ktp_photo']) && file_exists(__DIR__ . '/../' . $w['ktp_photo'])): ?>
                                            <div class="photo-thumb" onclick="viewPhoto('/<?= htmlspecialchars($w['ktp_photo']) ?>', 'KTP - <?= htmlspecialchars($w['account_holder']) ?>')">
                                                <img src="/<?= htmlspecialchars($w['ktp_photo']) ?>" alt="KTP">
                                                <div class="photo-label">KTP</div>
                                            </div>
                                        <?php else: ?>
                                            <div class="photo-thumb no-photo" title="Foto KTP tidak tersedia">
                                                <i class="bi bi-person-x-fill"></i>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <?php if (!empty($w['buku_rek_photo']) && file_exists(__DIR__ . '/../' . $w['buku_rek_photo'])): ?>
                                            <div class="photo-thumb" onclick="viewPhoto('/<?= htmlspecialchars($w['buku_rek_photo']) ?>', 'Buku Rekening - <?= htmlspecialchars($w['bank_name']) ?> <?= htmlspecialchars($w['account_number']) ?>')">
                                                <img src="/<?= htmlspecialchars($w['buku_rek_photo']) ?>" alt="Buku Rekening">
                                                <div class="photo-label">Buku Rek</div>
                                            </div>
                                        <?php else: ?>
                                            <div class="photo-thumb no-photo" title="Foto Buku Rekening tidak tersedia">
                                                <i class="bi bi-journal-x"></i>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <button type="button" class="btn-action view-photo" 
                                                onclick="viewAllPhotos(<?= $w['id'] ?>)" 
                                                title="Lihat Semua Dokumen">
                                            <i class="bi bi-eye-fill"></i>
                                        </button>
                                    </div>
                                    
                                    <?php if (!empty($w['notes'])): ?>
                                        <div class="data-sub" style="margin-top: 6px; font-style: italic;">
                                            💬 <?= htmlspecialchars($w['notes']) ?>
                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="data-value" style="font-size: 0.85rem;">
                                        <?= htmlspecialchars($w['requested_by_name'] ?? '-') ?>
                                    </div>
                                </td>
                                <td>
                                    <?php if ($w['status'] === 'pending'): ?>
                                        <span class="badge-modern pending">
                                            <i class="bi bi-clock"></i> Pending
                                        </span>
                                    <?php elseif ($w['status'] === 'approved'): ?>
                                        <span class="badge-modern approved">
                                            <i class="bi bi-check-circle"></i> Approved
                                        </span>
                                        <?php if (!empty($w['processed_at'])): ?>
                                            <div class="data-sub"><?= date('d/m/Y H:i', strtotime($w['processed_at'])) ?></div>
                                        <?php endif; ?>
                                    <?php elseif ($w['status'] === 'rejected'): ?>
                                        <span class="badge-modern rejected">
                                            <i class="bi bi-x-circle"></i> Rejected
                                        </span>
                                        <?php if (!empty($w['rejection_reason'])): ?>
                                            <div class="rejection-reason">
                                                <?= htmlspecialchars($w['rejection_reason']) ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if ($w['status'] === 'pending'): ?>
                                        <div class="action-buttons">
                                            <form method="POST" style="display: inline;" onsubmit="return confirm('Approve penarikan ini? Pastikan dokumen sudah diperiksa!')">
                                                <?= csrfField() ?>
                                                <input type="hidden" name="action" value="approve">
                                                <input type="hidden" name="withdrawal_id" value="<?= $w['id'] ?>">
                                                <button type="submit" class="btn-action approve" title="Approve">
                                                    <i class="bi bi-check-lg"></i>
                                                </button>
                                            </form>
                                            <button type="button" class="btn-action reject" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#rejectModal<?= $w['id'] ?>" 
                                                    title="Reject">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </div>
                                        
                                        <!-- Reject Modal -->
                                        <div class="modal fade modal-modern" id="rejectModal<?= $w['id'] ?>" tabindex="-1">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <form method="POST">
                                                        <?= csrfField() ?>
                                                        <input type="hidden" name="action" value="reject">
                                                        <input type="hidden" name="withdrawal_id" value="<?= $w['id'] ?>">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">
                                                                <i class="bi bi-exclamation-triangle-fill"></i>
                                                                Reject Request Penarikan
                                                            </h5>
                                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group-modern">
                                                                <label class="form-label-modern">Alasan Reject *</label>
                                                                <textarea name="reason" class="form-control-modern" rows="4" required placeholder="Masukkan alasan penolakan..."></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn-modal secondary" data-bs-dismiss="modal">Batal</button>
                                                            <button type="submit" class="btn-modal danger">
                                                                <i class="bi bi-x-circle-fill"></i> Reject
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    <?php else: ?>
                                        <span style="color: #999; font-size: 0.85rem;">-</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            
            <!-- Mobile Card View -->
            <div class="mobile-cards" style="padding: 16px;">
                <?php foreach ($withdrawals as $w): ?>
                    <div class="mobile-card">
                        <div class="mobile-card-header">
                            <div class="mobile-card-branch">
                                <div class="mobile-card-branch-name"><?= htmlspecialchars($w['branch_name'] ?? '-') ?></div>
                                <div class="mobile-card-branch-code"><?= htmlspecialchars($w['branch_code'] ?? '-') ?></div>
                            </div>
                            <div class="mobile-card-amount">
                                Rp <?= number_format($w['amount'], 0, ',', '.') ?>
                                <small><?= date('d/m/Y H:i', strtotime($w['requested_at'])) ?></small>
                            </div>
                        </div>
                        
                        <div class="mobile-card-body">
                            <div class="mobile-card-row">
                                <span class="label">Bank</span>
                                <span class="value">
                                    <?= htmlspecialchars($w['bank_name']) ?> - <?= htmlspecialchars($w['account_number']) ?>
                                    <div style="color: #999; font-size: 0.75rem; font-weight: 500; margin-top: 2px;">
                                        a.n. <?= htmlspecialchars($w['account_holder']) ?>
                                    </div>
                                    <?php if ($w['bank_account_id']): ?>
                                        <?php if ($w['bank_verified']): ?>
                                            <div class="verification-badge verified" style="margin-top: 4px;">
                                                <i class="bi bi-check-circle-fill"></i> Terverifikasi
                                            </div>
                                        <?php else: ?>
                                            <div class="verification-badge unverified" style="margin-top: 4px;">
                                                <i class="bi bi-hourglass-split"></i> Belum Verifikasi
                                            </div>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <div class="verification-badge not-found" style="margin-top: 4px;">
                                            <i class="bi bi-exclamation-triangle-fill"></i> Tidak Ditemukan
                                        </div>
                                    <?php endif; ?>
                                </span>
                            </div>
                            
                            <div class="mobile-card-row">
                                <span class="label">Request</span>
                                <span class="value"><?= htmlspecialchars($w['requested_by_name'] ?? '-') ?></span>
                            </div>
                            
                            <div class="mobile-card-row">
                                <span class="label">Status</span>
                                <span class="value">
                                    <?php if ($w['status'] === 'pending'): ?>
                                        <span class="badge-modern pending">
                                            <i class="bi bi-clock"></i> Pending
                                        </span>
                                    <?php elseif ($w['status'] === 'approved'): ?>
                                        <span class="badge-modern approved">
                                            <i class="bi bi-check-circle"></i> Approved
                                        </span>
                                    <?php elseif ($w['status'] === 'rejected'): ?>
                                        <span class="badge-modern rejected">
                                            <i class="bi bi-x-circle"></i> Rejected
                                        </span>
                                    <?php endif; ?>
                                </span>
                            </div>
                            
                            <!-- Photo Preview Section (Mobile) -->
                            <div class="mobile-photo-section">
                                <div class="mobile-photo-title">
                                    <i class="bi bi-camera-fill"></i> Dokumen Verifikasi
                                </div>
                                <div class="mobile-photo-grid">
                                    <?php if (!empty($w['ktp_photo']) && file_exists(__DIR__ . '/../' . $w['ktp_photo'])): ?>
                                        <div class="mobile-photo-item" onclick="viewPhoto('/<?= htmlspecialchars($w['ktp_photo']) ?>', 'KTP - <?= htmlspecialchars(addslashes($w['account_holder'])) ?>')">
                                            <img src="/<?= htmlspecialchars($w['ktp_photo']) ?>" alt="KTP">
                                            <div class="photo-label">📷 KTP</div>
                                        </div>
                                    <?php else: ?>
                                        <div class="mobile-photo-item no-photo">
                                            <i class="bi bi-person-x-fill"></i>
                                            <span>KTP tidak tersedia</span>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($w['buku_rek_photo']) && file_exists(__DIR__ . '/../' . $w['buku_rek_photo'])): ?>
                                        <div class="mobile-photo-item" onclick="viewPhoto('/<?= htmlspecialchars($w['buku_rek_photo']) ?>', 'Buku Rekening - <?= htmlspecialchars(addslashes($w['bank_name'])) ?>')">
                                            <img src="/<?= htmlspecialchars($w['buku_rek_photo']) ?>" alt="Buku Rekening">
                                            <div class="photo-label">📖 Buku Rek</div>
                                        </div>
                                    <?php else: ?>
                                        <div class="mobile-photo-item no-photo">
                                            <i class="bi bi-journal-x"></i>
                                            <span>Buku Rek tidak ada</span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            
                            <?php if (!empty($w['rejection_reason'])): ?>
                                <div class="rejection-reason">
                                    💬 <?= htmlspecialchars($w['rejection_reason']) ?>
                                </div>
                            <?php endif; ?>
                            
                            <?php if (!empty($w['notes'])): ?>
                                <div style="background: #fff9e6; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem; color: #856404; border-left: 3px solid #FF9900;">
                                    💬 Catatan: <?= htmlspecialchars($w['notes']) ?>
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <?php if ($w['status'] === 'pending'): ?>
                            <div class="mobile-card-footer">
                                <form method="POST" style="flex: 1; display: flex;" onsubmit="return confirm('Approve penarikan ini? Pastikan dokumen sudah diperiksa!')">
                                    <?= csrfField() ?>
                                    <input type="hidden" name="action" value="approve">
                                    <input type="hidden" name="withdrawal_id" value="<?= $w['id'] ?>">
                                    <button type="submit" class="btn-action approve" style="flex: 1;">
                                        <i class="bi bi-check-lg"></i>
                                        <span>Approve</span>
                                    </button>
                                </form>
                                <button type="button" class="btn-action reject" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#rejectModal<?= $w['id'] ?>"
                                        style="flex: 1;">
                                    <i class="bi bi-x-lg"></i>
                                    <span>Reject</span>
                                </button>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Photo Viewer Modal -->
<div class="modal fade photo-viewer-modal" id="photoViewerModal" 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-zoom-in"></i>
                    <span id="photoViewerTitle">Preview Dokumen</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <img id="photoViewerImage" src="" alt="Preview">
            </div>
            <div class="modal-footer">
                <div class="photo-caption" id="photoViewerCaption"></div>
            </div>
        </div>
    </div>
</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' : '';
    }
}

// View single photo
function viewPhoto(url, title) {
    document.getElementById('photoViewerImage').src = url;
    document.getElementById('photoViewerTitle').textContent = 'Preview: ' + title;
    document.getElementById('photoViewerCaption').textContent = title;
    
    const modal = new bootstrap.Modal(document.getElementById('photoViewerModal'));
    modal.show();
}

// View all photos for a withdrawal
function viewAllPhotos(withdrawalId) {
    // Find the withdrawal data from the page
    // For simplicity, just open the first available photo
    alert('Gunakan thumbnail di samping untuk melihat foto spesifik (KTP atau Buku Rekening)');
}
</script>

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