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

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('dashboard'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Transactions</div>
        <div class="right">
            <a href="#" class="headerButton" data-bs-toggle="modal" data-bs-target="#filterModal">
                <ion-icon name="filter-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-2">
            <?php if (empty($transactions)): ?>
            <div class="text-center py-5">
                <ion-icon name="receipt-outline" style="font-size: 64px; color: #ccc;"></ion-icon>
                <h3 class="mt-2">No transactions</h3>
                <p class="text-muted">You haven't made any transactions yet</p>
                <a href="<?php echo base_url('transfers'); ?>" class="btn btn-primary mt-2">Make a Transfer</a>
            </div>
            <?php else: ?>
            <div class="transactions">
                <?php 
                $current_date = '';
                foreach ($transactions as $txn): 
                    $txn_date = date('M d, Y', strtotime($txn->created_at));
                    if ($txn_date !== $current_date):
                        $current_date = $txn_date;
                ?>
                <div class="section-title mt-2"><?php echo $txn_date; ?></div>
                <?php endif; ?>
                
                <a href="<?php echo base_url('transactions/view/' . $txn->id); ?>" class="item">
                    <div class="detail">
                        <?php 
                        $is_debit = !empty($txn->source_account_id);
                        $icon_color = $is_debit ? 'danger' : 'success';
                        $icon_name = $is_debit ? 'arrow-up-outline' : 'arrow-down-outline';
                        ?>
                        <div class="rounded-circle bg-<?php echo $icon_color; ?> d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; min-width: 45px;">
                            <ion-icon name="<?php echo $icon_name; ?>" class="text-white" style="font-size: 22px;"></ion-icon>
                        </div>
                        <div class="ms-2">
                            <strong><?php echo ucfirst(str_replace('_', ' ', $txn->type)); ?></strong>
                            <p class="text-muted mb-0" style="font-size: 12px;"><?php echo htmlspecialchars($txn->narration ?: 'Transaction'); ?></p>
                        </div>
                    </div>
                    <div class="right text-end">
                        <div class="price <?php echo $is_debit ? 'text-danger' : 'text-success'; ?>" style="font-weight: 600;">
                            <?php echo ($is_debit ? '- ' : '+ ') . format_money($txn->amount, $txn->currency); ?>
                        </div>
                        <span class="badge badge-<?php echo $txn->status == 'completed' ? 'success' : ($txn->status == 'failed' ? 'danger' : 'warning'); ?>" style="font-size: 10px;">
                            <?php echo ucfirst($txn->status); ?>
                        </span>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
            
            <?php if ($page > 1 || count($transactions) >= 20): ?>
            <div class="section mt-3">
                <div class="d-flex justify-content-between">
                    <?php if ($page > 1): ?>
                    <a href="?page=<?php echo $page - 1; ?>" class="btn btn-outline-primary">Previous</a>
                    <?php else: ?>
                    <span></span>
                    <?php endif; ?>
                    
                    <?php if (count($transactions) >= 20): ?>
                    <a href="?page=<?php echo $page + 1; ?>" class="btn btn-primary">Next</a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Filter Modal -->
    <div class="modal fade action-sheet" id="filterModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Filter Transactions</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <form method="GET">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Type</label>
                                    <select class="form-control" name="type">
                                        <option value="">All Types</option>
                                        <option value="transfer">Transfer</option>
                                        <option value="bill_payment">Bill Payment</option>
                                        <option value="card_funding">Card Funding</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Status</label>
                                    <select class="form-control" name="status">
                                        <option value="">All Status</option>
                                        <option value="completed">Completed</option>
                                        <option value="pending">Pending</option>
                                        <option value="failed">Failed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group basic">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Apply Filter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

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