<?php 
$this->load->view('layouts/header');
$this->load->helper('layout');
?>

    <!-- App Header -->
    <div class="appHeader bg-primary text-light">
        <div class="left">
            <a href="#" class="headerButton" data-bs-toggle="modal" data-bs-target="#sidebarPanel">
                <ion-icon name="menu-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">
            <img src="<?php echo get_app_logo(); ?>" alt="logo" class="logo">
        </div>
        <div class="right">
            <a href="<?php echo base_url('dashboard/notifications'); ?>" class="headerButton">
                <ion-icon class="icon" name="notifications-outline"></ion-icon>
                <?php if ($unread_notifications > 0): ?>
                <span class="badge badge-danger"><?php echo $unread_notifications; ?></span>
                <?php endif; ?>
            </a>
            <a href="<?php echo base_url('dashboard/profile'); ?>" class="headerButton">
                <img src="<?php echo get_user_avatar($user, 'w32'); ?>" alt="avatar" class="imaged w32 rounded">
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <?php if ($this->session->flashdata('success')): ?>
        <div class="section mt-2">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <?php echo $this->session->flashdata('success'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
        <?php endif; ?>

        <!-- Wallet Card -->
        <div class="section wallet-card-section pt-1">
            <div class="wallet-card">
                <div class="balance">
                    <div class="left">
                        <span class="title">Total Balance</span>
                        <h1 class="total"><?php echo format_money($total_balance); ?></h1>
                    </div>
                    <div class="right">
                        <a href="<?php echo base_url('transfers'); ?>" class="button">
                            <ion-icon name="add-outline"></ion-icon>
                        </a>
                    </div>
                </div>
                <div class="wallet-footer">
                    <div class="item">
                        <a href="<?php echo base_url('dashboard/deposit'); ?>">
                            <div class="icon-wrapper bg-danger">
                                <ion-icon name="arrow-down-outline"></ion-icon>
                            </div>
                            <strong>Receive</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="<?php echo base_url('transfers'); ?>">
                            <div class="icon-wrapper">
                                <ion-icon name="arrow-forward-outline"></ion-icon>
                            </div>
                            <strong>Send</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="<?php echo base_url('cards'); ?>">
                            <div class="icon-wrapper bg-success">
                                <ion-icon name="card-outline"></ion-icon>
                            </div>
                            <strong>Cards</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="<?php echo base_url('bills'); ?>">
                            <div class="icon-wrapper bg-warning">
                                <ion-icon name="receipt-outline"></ion-icon>
                            </div>
                            <strong>Bills</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats -->
        <div class="section">
            <div class="row mt-2 g-2">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Income</div>
                        <div class="value text-success" style="font-size: <?php echo strlen(format_money($income)) > 12 ? '16px' : '20px'; ?>; word-break: break-all;"><?php echo format_money($income); ?></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Expenses</div>
                        <div class="value text-danger" style="font-size: <?php echo strlen(format_money($expenses)) > 12 ? '16px' : '20px'; ?>; word-break: break-all;"><?php echo format_money($expenses); ?></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- My Accounts -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">My Accounts</h2>
                <a href="<?php echo base_url('accounts'); ?>" class="link">View All</a>
            </div>
            
            <?php foreach ($accounts as $account): ?>
            <div class="card mb-2">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge badge-<?php echo $account->account_type == 'savings' ? 'primary' : 'secondary'; ?> mb-1">
                                <?php echo ucfirst($account->account_type); ?>
                            </span>
                            <h4 class="mb-0"><?php echo $account->account_number; ?></h4>
                            <p class="text-muted mb-0"><?php echo $account->account_name; ?></p>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-0"><?php echo format_money($account->available_balance ?? 0, $account->currency); ?></h3>
                            <?php if ($account->is_primary): ?>
                            <span class="badge badge-success">Primary</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- Transactions -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">Recent Transactions</h2>
                <a href="<?php echo base_url('transactions'); ?>" class="link">View All</a>
            </div>
            <div class="transactions">
                <?php if (empty($recent_transactions)): ?>
                <div class="text-center py-4">
                    <ion-icon name="receipt-outline" style="font-size: 48px; color: #ccc;"></ion-icon>
                    <p class="text-muted mt-2">No transactions yet</p>
                </div>
                <?php else: ?>
                    <?php 
                    // Get user account IDs to determine if transaction is incoming or outgoing
                    $user_account_ids = array_column($accounts, 'id');
                    ?>
                    <?php foreach ($recent_transactions as $txn): ?>
                    <?php 
                    // Check if this is an outgoing transaction (user's account is source)
                    $is_outgoing = in_array($txn->source_account_id, $user_account_ids);
                    ?>
                    <a href="<?php echo base_url('transactions/view/' . $txn->id); ?>" class="item">
                        <div class="detail">
                            <div class="rounded-circle bg-<?php echo $is_outgoing ? 'danger' : 'success'; ?> d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; min-width: 42px;">
                                <ion-icon name="<?php echo $is_outgoing ? 'arrow-up-outline' : 'arrow-down-outline'; ?>" class="text-white" style="font-size: 20px;"></ion-icon>
                            </div>
                            <div class="ms-2">
                                <strong><?php echo ucfirst($txn->type); ?></strong>
                                <p class="text-muted mb-0" style="font-size: 12px;"><?php echo date('M d, Y H:i', strtotime($txn->created_at)); ?></p>
                            </div>
                        </div>
                        <div class="right text-end">
                            <div class="price <?php echo $is_outgoing ? 'text-danger' : 'text-success'; ?>" style="font-weight: 600;">
                                <?php echo ($is_outgoing ? '- ' : '+ ') . format_money($txn->amount, $txn->currency); ?>
                            </div>
                        </div>
                    </a>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>

        <!-- My Cards -->
        <?php if (!empty($cards)): ?>
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">My Cards</h2>
                <a href="<?php echo base_url('cards'); ?>" class="link">View All</a>
            </div>
            <?php $card = $cards[0]; // Show first card ?>
            <a href="<?php echo base_url('cards/view/' . $card->id); ?>">
                <div class="card-block bg-<?php echo $card->status == 'active' ? 'primary' : 'secondary'; ?>">
                    <div class="card-main">
                        <div class="balance">
                            <span class="label">BALANCE</span>
                            <h1 class="title"><?php echo format_money($card->balance, $card->currency); ?></h1>
                        </div>
                        <div class="in">
                            <div class="card-number">
                                <span class="label">CARD NUMBER</span>
                                <?php echo $card->card_number_masked; ?>
                            </div>
                            <div class="bottom">
                                <div class="card-expiry">
                                    <span class="label">EXPIRY</span>
                                    <?php echo $card->expiry_month; ?> / <?php echo substr($card->expiry_year, -2); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <?php endif; ?>

        <!-- Quick Actions -->
        <div class="section mt-3 mb-3">
            <div class="section-title">Quick Actions</div>
            <div class="row">
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('bills/airtime'); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mb-1" style="width: 50px; height: 50px; margin: 0 auto;">
                            <ion-icon name="call-outline" style="font-size: 22px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-primary">Airtime</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('bills/electricity'); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-warning d-flex align-items-center justify-content-center mb-1" style="width: 50px; height: 50px; margin: 0 auto;">
                            <ion-icon name="flash-outline" style="font-size: 22px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-warning">Electricity</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('bills/tv'); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-danger d-flex align-items-center justify-content-center mb-1" style="width: 50px; height: 50px; margin: 0 auto;">
                            <ion-icon name="tv-outline" style="font-size: 22px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-danger">TV</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('transfers'); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-success d-flex align-items-center justify-content-center mb-1" style="width: 50px; height: 50px; margin: 0 auto;">
                            <ion-icon name="arrow-forward-outline" style="font-size: 22px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-success">Transfer</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- App Footer -->
        <div class="appFooter">
            <div class="footer-title">
                Copyright © <?php echo get_app_name(); ?> <?php echo date('Y'); ?>. All Rights Reserved.
            </div>
        </div>
    </div>

    <!-- App Bottom Menu -->
    <?php echo get_bottom_menu('dashboard'); ?>

    <!-- App Sidebar -->
    <?php echo get_sidebar($user, $total_balance); ?>

<?php $this->load->view('layouts/footer'); ?>
