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

requireRole('super_admin');
$pageTitle = 'Verifikasi Rekening Bank Cabang';

$db = db();

// ============================================================================
// HANDLE VERIFY / REJECT
// ============================================================================
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    $action = $_POST['action'] ?? '';
    $bankId = (int)($_POST['bank_id'] ?? 0);
    
    if ($bankId > 0) {
        try {
            if ($action === 'verify') {
                $db->prepare("
                    UPDATE branch_bank_accounts 
                    SET is_verified = 1, verified_by = ?, verified_at = NOW()
                    WHERE id = ?
                ")->execute([currentUserId(), $bankId]);
                
                logActivity(currentUserId(), 'verify_bank_account', "Verifikasi rekening bank ID: $bankId");
                redirect('/admin/bank_verification.php', '✅ Rekening bank berhasil diverifikasi');
            }
            
            if ($action === 'unverify') {
                $db->prepare("
                    UPDATE branch_bank_accounts 
                    SET is_verified = 0, verified_by = ?, verified_at = NULL
                    WHERE id = ?
                ")->execute([currentUserId(), $bankId]);
                
                logActivity(currentUserId(), 'unverify_bank_account', "Unverify rekening bank ID: $bankId");
                redirect('/admin/bank_verification.php', '✅ Status verifikasi dicabut');
            }
            
            if ($action === 'delete') {
                // Hapus file foto
                $stmt = $db->prepare("SELECT ktp_photo, buku_rek_photo FROM branch_bank_accounts WHERE id = ?");
                $stmt->execute([$bankId]);
                $bank = $stmt->fetch();
                
                if ($bank) {
                    if (!empty($bank['ktp_photo']) && file_exists(__DIR__ . '/../' . $bank['ktp_photo'])) {
                        @unlink(__DIR__ . '/../' . $bank['ktp_photo']);
                    }
                    if (!empty($bank['buku_rek_photo']) && file_exists(__DIR__ . '/../' . $bank['buku_rek_photo'])) {
                        @unlink(__DIR__ . '/../' . $bank['buku_rek_photo']);
                    }
                }
                
                $db->prepare("DELETE FROM branch_bank_accounts WHERE id = ?")->execute([$bankId]);
                
                logActivity(currentUserId(), 'delete_bank_account', "Hapus rekening bank ID: $bankId");
                redirect('/admin/bank_verification.php', '✅ Rekening bank dihapus');
            }
        } catch (\Throwable $e) {
            $_SESSION['flash_error'] = '❌ Error: ' . $e->getMessage();
        }
    }
}

// ============================================================================
// LOAD DATA
// ============================================================================
$filterStatus = $_GET['status'] ?? 'all';
$filterBranch = (int)($_GET['branch'] ?? 0);
$search = trim($_GET['search'] ?? '');

$where = ["1=1"];
$params = [];

if ($filterStatus === 'pending') {
    $where[] = "ba.is_verified = 0";
} elseif ($filterStatus === 'verified') {
    $where[] = "ba.is_verified = 1";
}

if ($filterBranch > 0) {
    $where[] = "ba.branch_id = ?";
    $params[] = $filterBranch;
}

if (!empty($search)) {
    $where[] = "(ba.bank_name LIKE ? OR ba.account_number LIKE ? OR ba.account_holder LIKE ? OR b.name LIKE ?)";
    $sp = "%$search%";
    $params[] = $sp; $params[] = $sp; $params[] = $sp; $params[] = $sp;
}

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

$bankAccounts = [];
try {
    $stmt = $db->prepare("
        SELECT ba.*, b.name as branch_name, 
               u_verify.name as verifier_name
        FROM branch_bank_accounts ba
        LEFT JOIN branches b ON ba.branch_id = b.id
        LEFT JOIN users u_verify ON ba.verified_by = u_verify.id
        WHERE $whereClause
        ORDER BY 
            ba.is_verified ASC,
            ba.created_at DESC
    ");
    $stmt->execute($params);
    $bankAccounts = $stmt->fetchAll();
} catch (\Throwable $e) {}

// Stats
try {
    $stats = $db->query("
        SELECT 
            COUNT(*) as total,
            SUM(CASE WHEN is_verified = 1 THEN 1 ELSE 0 END) as verified,
            SUM(CASE WHEN is_verified = 0 THEN 1 ELSE 0 END) as pending
        FROM branch_bank_accounts
    ")->fetch();
} catch (\Throwable $e) {
    $stats = ['total' => 0, 'verified' => 0, 'pending' => 0];
}

// Load branches untuk filter
$branches = [];
try {
    $branches = $db->query("SELECT id, name FROM branches ORDER BY name")->fetchAll();
} catch (\Throwable $e) {}

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

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

<style>
/* === NAVBAR MODERN === */
.navbar-modern {
    background: linear-gradient(135deg, #6f42c1 0%, #9C27B0 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: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

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

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

.page-title i {
    font-size: 1.8rem;
    color: #9C27B0;
}

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

/* === SUMMARY CARDS === */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 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;
    text-decoration: none;
    color: inherit;
    display: block;
}

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

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

.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.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning .summary-card-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }

.summary-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: #003D7A;
}

.summary-card-footer {
    font-size: 0.78rem;
    color: #999;
}

/* === 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: #9C27B0;
    color: #9C27B0;
}

.status-tab.active {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 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-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: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }

.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.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;
}

/* === FILTER FORM === */
.filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto 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.8rem;
}

.form-control-filter,
.form-select-filter {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.88rem;
    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: #9C27B0;
    background: white;
    box-shadow: 0 0 0 4px rgba(156, 39, 176, 0.1);
}

.btn-filter {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    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: 42px;
}

.btn-filter.primary {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

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

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

.bank-card {
    background: white;
    border: 2px solid #e8f4f8;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bank-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #9C27B0;
}

.bank-card.verified {
    border-left: 5px solid #00C853;
}

.bank-card.pending {
    border-left: 5px solid #FF9900;
}

.bank-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bank-card-info {
    flex: 1;
    min-width: 200px;
}

.bank-branch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #f3e5f5;
    color: #6a1b9a;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.bank-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bank-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #003D7A;
}

.bank-account-number {
    font-family: 'Courier New', monospace;
    background: #f8fafc;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    border-left: 3px solid #9C27B0;
}

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

.bank-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

.bank-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .bank-card-body {
        grid-template-columns: 1fr;
    }
}

.photo-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
}

.photo-section-title {
    font-size: 0.78rem;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

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

.photo-item:hover {
    border-color: #9C27B0;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

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

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

.photo-item.no-photo i {
    color: #856404;
    font-size: 2rem;
    margin-bottom: 6px;
}

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

.bank-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #999;
    padding-top: 12px;
    border-top: 1px dashed #e8f4f8;
    margin-bottom: 12px;
}

.bank-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.btn-bank-action {
    padding: 9px 16px;
    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;
    gap: 6px;
    text-decoration: none;
}

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

.btn-bank-action.verify:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 200, 83, 0.4);
}

.btn-bank-action.unverify {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.btn-bank-action.delete {
    background: white;
    color: #DC3545;
    border: 2px solid #ffe5e5;
}

.btn-bank-action.delete:hover {
    background: #DC3545;
    color: white;
    border-color: #DC3545;
}

/* === 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;
}

/* === 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;
}

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

@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-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.2rem;
    }
    
    .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;
    }
    
    .bank-card {
        padding: 16px;
    }
    
    .bank-name {
        font-size: 1rem;
    }
    
    .photo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .btn-bank-action {
        flex: 1;
        justify-content: center;
        padding: 10px;
    }
}

@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: 1.05rem;
    }
    
    .bank-card {
        padding: 14px;
    }
    
    .bank-name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .bank-card-footer {
        flex-direction: column;
    }
    
    .btn-bank-action {
        width: 100%;
    }
    /* Floating Button Container */
.floating-menu-btn{
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 99999;
}

/* Tombol Burger */
.floating-burger-btn{
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 15px;
    background: #0d6efd;
    color: #fff;
    font-size: 26px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    transition: all .3s ease;
}

.floating-burger-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.floating-burger-btn:active{
    transform: scale(.95);
}

.floating-burger-btn i{
    line-height: 1;
}

/* Mobile */
@media (max-width:768px){
    .floating-menu-btn{
        top: 15px;
        left: 15px;
    }

    .floating-burger-btn{
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}
}
</style>
<div class="content-wrapper">
<!-- Navbar Modern dengan Burger Icon -->
<div class="floating-menu-btn">
    <button class="floating-burger-btn" onclick="toggleSidebar()">
        <i class="bi bi-list"></i>
    </button>
</div>

<div class="main-content">
    <!-- Page Header -->
    <div class="page-header">
        
        <h2 class="page-title">
            <i class="bi bi-bank"></i>
            <span>Verifikasi Rekening Bank Cabang</span>
        </h2>
        <p class="page-subtitle">Periksa dan verifikasi rekening bank yang didaftarkan cabang untuk penarikan dana</p>
    </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 Penting -->
    <div class="alert-modern info">
        <i class="bi bi-info-circle-fill"></i>
        <div>
            <strong>Penting:</strong> Verifikasi rekening bank hanya dilakukan <strong>sekali</strong>. Setelah terverifikasi, 
            cabang dapat menggunakan rekening ini untuk mengajukan penarikan dana berkali-kali tanpa perlu verifikasi ulang. 
            Periksa foto KTP dan Buku Rekening dengan teliti sebelum memverifikasi.
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="summary-row">
        <a href="?status=all" class="summary-card primary">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Total Rekening</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-bank"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($stats['total'] ?? 0) ?></div>
            <div class="summary-card-footer">📋 Seluruh rekening terdaftar</div>
        </a>
        
        <a href="?status=verified" class="summary-card success">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Terverifikasi</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($stats['verified'] ?? 0) ?></div>
            <div class="summary-card-footer">✅ Bisa dipakai penarikan</div>
        </a>
        
        <a href="?status=pending" class="summary-card warning">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Menunggu Verifikasi</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($stats['pending'] ?? 0) ?></div>
            <div class="summary-card-footer">⏳ Perlu ditindaklanjuti</div>
        </a>
    </div>

    <!-- Status Tabs -->
    <div class="status-tabs">
        <a href="?status=all" class="status-tab <?= $filterStatus === 'all' ? 'active' : '' ?>">
            <i class="bi bi-list-ul"></i> Semua
            <span class="status-tab-count"><?= $stats['total'] ?? 0 ?></span>
        </a>
        <a href="?status=pending" class="status-tab warning <?= $filterStatus === 'pending' ? 'active' : '' ?>">
            <i class="bi bi-hourglass-split"></i> Pending
            <span class="status-tab-count"><?= $stats['pending'] ?? 0 ?></span>
        </a>
        <a href="?status=verified" class="status-tab success <?= $filterStatus === 'verified' ? 'active' : '' ?>">
            <i class="bi bi-check-circle"></i> Terverifikasi
            <span class="status-tab-count"><?= $stats['verified'] ?? 0 ?></span>
        </a>
    </div>

    <!-- Filter -->
    <div class="card-modern">
        <div class="card-header-modern purple">
            <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">
                <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 bank, no rek, nama pemilik, cabang...">
                </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="all" <?= $filterStatus === 'all' ? 'selected' : '' ?>>Semua</option>
                        <option value="pending" <?= $filterStatus === 'pending' ? 'selected' : '' ?>>⏳ Pending</option>
                        <option value="verified" <?= $filterStatus === 'verified' ? 'selected' : '' ?>>✅ Terverifikasi</option>
                    </select>
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-building"></i> Cabang
                    </label>
                    <select name="branch" class="form-select-filter">
                        <option value="">Semua Cabang</option>
                        <?php foreach ($branches as $b): ?>
                            <option value="<?= $b['id'] ?>" <?= $filterBranch == $b['id'] ? 'selected' : '' ?>>
                                <?= htmlspecialchars($b['name']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <button type="submit" class="btn-filter primary">
                    <i class="bi bi-search"></i>
                    <span>Filter</span>
                </button>
                <a href="?status=all" class="btn-filter outline">
                    <i class="bi bi-arrow-counterclockwise"></i>
                    <span>Reset</span>
                </a>
            </form>
        </div>
    </div>

    <!-- Bank Accounts List -->
    <?php if (empty($bankAccounts)): ?>
        <div class="card-modern">
            <div class="empty-state">
                <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">
                    <?php if ($filterStatus !== 'all' || $filterBranch > 0 || !empty($search)): ?>
                        Tidak ada rekening yang sesuai filter. 
                        <a href="?status=all" style="color: #9C27B0; font-weight: 600;">Reset filter</a>
                    <?php else: ?>
                        Cabang belum mendaftarkan rekening bank.
                    <?php endif; ?>
                </p>
            </div>
        </div>
    <?php else: ?>
        <div class="bank-list">
            <?php foreach ($bankAccounts as $ba): ?>
                <div class="bank-card <?= $ba['is_verified'] ? 'verified' : 'pending' ?>">
                    <div class="bank-card-header">
                        <div class="bank-card-info">
                            <div class="bank-branch">
                                <i class="bi bi-building"></i>
                                <?= htmlspecialchars($ba['branch_name'] ?? 'Unknown') ?>
                            </div>
                            <div class="bank-name-row">
                                <div class="bank-name"><?= htmlspecialchars($ba['bank_name']) ?></div>
                                <div class="bank-account-number">
                                    <?= htmlspecialchars($ba['account_number']) ?>
                                </div>
                            </div>
                            <div class="bank-holder">
                                <i class="bi bi-person-fill"></i>
                                a.n. <strong><?= htmlspecialchars($ba['account_holder']) ?></strong>
                            </div>
                        </div>
                        <div>
                            <?php if ($ba['is_verified']): ?>
                                <span class="bank-status-badge verified">
                                    <i class="bi bi-check-circle-fill"></i> Terverifikasi
                                </span>
                            <?php else: ?>
                                <span class="bank-status-badge pending">
                                    <i class="bi bi-hourglass-split"></i> Menunggu Verifikasi
                                </span>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="bank-card-body">
                        <!-- Foto KTP -->
                        <div class="photo-section">
                            <div class="photo-section-title">
                                <i class="bi bi-person-vcard-fill"></i> Foto KTP
                            </div>
                            <?php if (!empty($ba['ktp_photo']) && file_exists(__DIR__ . '/../' . $ba['ktp_photo'])): ?>
                                <div class="photo-item" onclick="viewPhoto('/<?= htmlspecialchars($ba['ktp_photo']) ?>', 'KTP - <?= htmlspecialchars(addslashes($ba['account_holder'])) ?>')">
                                    <img src="/<?= htmlspecialchars($ba['ktp_photo']) ?>" alt="KTP">
                                    <div class="photo-label">🔍 Klik untuk zoom</div>
                                </div>
                            <?php else: ?>
                                <div class="photo-item no-photo">
                                    <i class="bi bi-person-x-fill"></i>
                                    <span>Foto KTP tidak tersedia</span>
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Foto Buku Rekening -->
                        <div class="photo-section">
                            <div class="photo-section-title">
                                <i class="bi bi-journal-text"></i> Buku Rekening / M-Banking
                            </div>
                            <?php if (!empty($ba['buku_rek_photo']) && file_exists(__DIR__ . '/../' . $ba['buku_rek_photo'])): ?>
                                <div class="photo-item" onclick="viewPhoto('/<?= htmlspecialchars($ba['buku_rek_photo']) ?>', 'Buku Rekening - <?= htmlspecialchars(addslashes($ba['bank_name'])) ?> <?= htmlspecialchars($ba['account_number']) ?>')">
                                    <img src="/<?= htmlspecialchars($ba['buku_rek_photo']) ?>" alt="Buku Rekening">
                                    <div class="photo-label">🔍 Klik untuk zoom</div>
                                </div>
                            <?php else: ?>
                                <div class="photo-item no-photo">
                                    <i class="bi bi-journal-x"></i>
                                    <span>Foto Buku Rek tidak tersedia</span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="bank-meta">
                        <div class="bank-meta-item">
                            <i class="bi bi-calendar3"></i>
                            Terdaftar: <?= date('d/m/Y H:i', strtotime($ba['created_at'])) ?>
                        </div>
                        <?php if ($ba['is_verified'] && !empty($ba['verified_at'])): ?>
                            <div class="bank-meta-item">
                                <i class="bi bi-check-circle"></i>
                                Diverifikasi: <?= date('d/m/Y H:i', strtotime($ba['verified_at'])) ?>
                            </div>
                            <?php if (!empty($ba['verifier_name'])): ?>
                                <div class="bank-meta-item">
                                    <i class="bi bi-person"></i>
                                    Oleh: <?= htmlspecialchars($ba['verifier_name']) ?>
                                </div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                    
                    <div class="bank-card-footer">
                        <?php if (!$ba['is_verified']): ?>
                            <form method="POST" style="display: inline;" 
                                  onsubmit="return confirm('Verifikasi rekening ini? Pastikan foto KTP dan Buku Rekening sudah diperiksa dan data sesuai!')">
                                <?= csrfField() ?>
                                <input type="hidden" name="action" value="verify">
                                <input type="hidden" name="bank_id" value="<?= $ba['id'] ?>">
                                <button type="submit" class="btn-bank-action verify">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Verifikasi Sekarang</span>
                                </button>
                            </form>
                        <?php else: ?>
                            <form method="POST" style="display: inline;" 
                                  onsubmit="return confirm('Cabut verifikasi rekening ini? Cabang tidak bisa pakai rekening ini untuk penarikan sampai diverifikasi ulang!')">
                                <?= csrfField() ?>
                                <input type="hidden" name="action" value="unverify">
                                <input type="hidden" name="bank_id" value="<?= $ba['id'] ?>">
                                <button type="submit" class="btn-bank-action unverify">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    <span>Cabut Verifikasi</span>
                                </button>
                            </form>
                        <?php endif; ?>
                        
                        <form method="POST" style="display: inline;" 
                              onsubmit="return confirm('HAPUS rekening bank ini? Tindakan ini tidak bisa dibatalkan! File foto juga akan dihapus.')">
                            <?= csrfField() ?>
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="bank_id" value="<?= $ba['id'] ?>">
                            <button type="submit" class="btn-bank-action delete">
                                <i class="bi bi-trash-fill"></i>
                                <span>Hapus</span>
                            </button>
                        </form>
                    </div>
                </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>

<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' : '';
    }
}

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();
}
</script>

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