<?php $current_page = 'cardyfie-transactions'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cardyfie Transactions - Admin App</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <?= view('admin/partials/admin_styles') ?>
    <style>
        .page-header { margin-bottom: 1.5rem; }
        .page-title { font-size: 1.5rem; color: #1e293b; font-weight: 700; }
        .breadcrumb { display: flex; align-items: center; gap: 0.5rem; color: #64748b; margin-top: 0.35rem; font-size: 0.9rem; }
        .breadcrumb a { color: #6366f1; text-decoration: none; font-weight: 500; }
        .report-section { margin-bottom: 1.5rem; }
        .report-stat { background: #fff; padding: 1rem 1.5rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; font-weight: 600; color: #1e293b; display: inline-block; }
        .report-stat span { color: #64748b; font-weight: 500; font-size: 0.9rem; }
        .filters {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
        }

        .filter-group label {
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #2d3748;
        }

        .filter-group input {
            padding: 0.85rem;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 0.9rem;
        }

        .btn {
            padding: 0.85rem 1.5rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            display: inline-block;
        }

        .transactions-table {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        .table th {
            background: #f8f9fc;
            font-weight: 700;
            color: #4a5568;
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .status-success {
            background: #d1fae5;
            color: #065f46;
        }

        .status-failed {
            background: #fee2e2;
            color: #991b1b;
        }

        .status-pending {
            background: #fef3c7;
            color: #92400e;
        }

        .amount {
            font-weight: 700;
            color: #10b981;
        }

        .amount.credit {
            color: #10b981;
        }

        .amount.debit {
            color: #ef4444;
        }

        .no-data {
            text-align: center;
            padding: 4rem;
            color: #718096;
        }
    </style>
</head>
<body>
<?= view('admin/partials/header_sidebar', ['current_page' => $current_page]) ?>

    <div class="page-header">
        <h1 class="page-title"><i class="fas fa-exchange-alt"></i> Cardyfie Transactions</h1>
        <div class="breadcrumb">
            <a href="<?= site_url('admin/dashboard') ?>">Dashboard</a>
            <i class="fas fa-chevron-right"></i>
            <span>Cardyfie Transactions</span>
        </div>
    </div>

    <div class="report-section">
        <div class="report-stat"><span>Transactions shown:</span> <?= (int)($count ?? 0) ?></div>
    </div>

    <div class="filters">
            <form method="GET" action="<?= site_url('admin/cardyfie-transactions') ?>">
                <div class="filter-grid">
                    <div class="filter-group">
                        <label for="card_ulid">Card ULID (Optional)</label>
                        <input type="text" name="card_ulid" id="card_ulid" value="<?= esc($card_ulid ?? '') ?>" placeholder="Leave empty for all cards">
                    </div>
                    <div class="filter-group" style="align-items: flex-end;">
                        <button type="submit" class="btn">
                            <i class="fas fa-search"></i> Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <?php if (isset($error)): ?>
            <div style="background: #fee2e2; color: #991b1b; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
                <i class="fas fa-exclamation-circle"></i> <?= esc($error) ?>
            </div>
        <?php endif; ?>

        <div class="transactions-table">
            <?php if (empty($transactions)): ?>
                <div class="no-data">
                    <i class="fas fa-exchange-alt" style="font-size: 3.5rem; margin-bottom: 1rem; color: #cbd5e0;"></i>
                    <h3>No Transactions Found</h3>
                    <p>There are no transactions available.</p>
                </div>
            <?php else: ?>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Currency</th>
                            <th>Fees</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($transactions as $txn): ?>
                            <tr>
                                <td><?= esc($txn['trx_id'] ?? 'N/A') ?></td>
                                <td><?= esc($txn['trx_type'] ?? 'N/A') ?></td>
                                <td>
                                    <span class="amount <?= strtolower($txn['amount_type'] ?? 'credit') ?>">
                                        <?= ($txn['amount_type'] ?? 'CREDIT') === 'CREDIT' ? '+' : '-' ?>
                                        <?= number_format((float)($txn['enter_amount'] ?? 0), 2) ?>
                                    </span>
                                </td>
                                <td><?= esc($txn['card_currency'] ?? 'N/A') ?></td>
                                <td><?= number_format((float)($txn['fees'] ?? 0), 2) ?> <?= esc($txn['fees_currency'] ?? '') ?></td>
                                <td>
                                    <span class="status-badge status-<?= strtolower($txn['status'] ?? 'pending') ?>">
                                        <?= esc($txn['status'] ?? 'PENDING') ?>
                                    </span>
                                </td>
                                <td><?= date('Y-m-d H:i:s', strtotime($txn['created_at'] ?? 'now')) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php endif; ?>
        </div>
<?= view('admin/partials/footer') ?>
</body>
</html>

