<?php $current_page = 'cardyfie-cards'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Details - 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; }
        .card-details-section {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #1a202c;
        }

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

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            color: #718096;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
        }

        .info-value {
            color: #1a202c;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .card-balance-large {
            font-size: 2.5rem;
            font-weight: 700;
            color: #10b981;
            margin: 1rem 0;
        }

        .actions-section {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 2rem;
        }

        .btn {
            padding: 0.85rem 1.5rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-warning {
            background: #f59e0b;
            color: white;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            display: inline-block;
        }

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

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

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

        .transactions-section {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

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

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }

        .modal-content {
            background: white;
            margin: 5% auto;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .close {
            font-size: 2rem;
            cursor: pointer;
            color: #718096;
        }

        .form-group {
            margin-bottom: 1rem;
        }

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

        .form-group input {
            width: 100%;
            padding: 0.85rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9rem;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .error-message {
            background: #fee2e2;
            color: #991b1b;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
<?= view('admin/partials/header_sidebar', ['current_page' => $current_page]) ?>

    <div class="page-header">
        <h1 class="page-title"><i class="fas fa-credit-card"></i> Card Details</h1>
        <div class="breadcrumb">
            <a href="<?= site_url('admin/dashboard') ?>">Dashboard</a>
            <i class="fas fa-chevron-right"></i>
            <a href="<?= site_url('admin/cardyfie-cards') ?>">Cards</a>
            <i class="fas fa-chevron-right"></i>
            <span>Card Details</span>
        </div>
    </div>

        <?php if (isset($error)): ?>
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i> <?= esc($error) ?>
            </div>
        <?php elseif ($card): ?>
            <div class="card-details-section">
                <h2 class="section-title">Card Information</h2>
                <div class="card-info-grid">
                    <div class="info-item">
                        <span class="info-label">Card Name</span>
                        <span class="info-value"><?= esc($card['card_name'] ?? 'N/A') ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Status</span>
                        <span class="status-badge status-<?= strtolower($card['status'] ?? 'enabled') ?>">
                            <?= esc($card['status'] ?? 'UNKNOWN') ?>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Card Number</span>
                        <span class="info-value"><?= esc($card['masked_pan'] ?? 'N/A') ?></span>
                    </div>
                    <?php if (isset($card['real_pan'])): ?>
                        <div class="info-item">
                            <span class="info-label">Real PAN</span>
                            <span class="info-value"><?= esc($card['real_pan']) ?></span>
                        </div>
                    <?php endif; ?>
                    <?php if (isset($card['cvv'])): ?>
                        <div class="info-item">
                            <span class="info-label">CVV</span>
                            <span class="info-value"><?= esc($card['cvv']) ?></span>
                        </div>
                    <?php endif; ?>
                    <div class="info-item">
                        <span class="info-label">Currency</span>
                        <span class="info-value"><?= esc($card['card_currency_code'] ?? 'N/A') ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Type</span>
                        <span class="info-value"><?= esc(ucfirst($card['card_type'] ?? 'N/A')) ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Provider</span>
                        <span class="info-value"><?= esc(ucfirst($card['card_provider'] ?? 'N/A')) ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Expires</span>
                        <span class="info-value"><?= esc($card['card_exp_time'] ?? 'N/A') ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Balance</span>
                        <div class="card-balance-large">
                            <?= number_format((float)($card['card_balance'] ?? 0), 2) ?> <?= esc($card['card_currency_code'] ?? '') ?>
                        </div>
                    </div>
                </div>

                <div class="actions-section">
                    <?php if (($card['status'] ?? '') === 'ENABLED'): ?>
                        <button onclick="freezeCard()" class="btn btn-warning">
                            <i class="fas fa-snowflake"></i> Freeze Card
                        </button>
                    <?php elseif (($card['status'] ?? '') === 'FROZEN'): ?>
                        <button onclick="unfreezeCard()" class="btn btn-success">
                            <i class="fas fa-fire"></i> Unfreeze Card
                        </button>
                    <?php endif; ?>
                    <button onclick="showDepositModal()" class="btn btn-success">
                        <i class="fas fa-plus-circle"></i> Deposit
                    </button>
                    <button onclick="showWithdrawModal()" class="btn btn-primary">
                        <i class="fas fa-minus-circle"></i> Withdraw
                    </button>
                    <?php if (($card['status'] ?? '') !== 'CLOSED'): ?>
                        <button onclick="closeCard()" class="btn btn-danger">
                            <i class="fas fa-times-circle"></i> Close Card
                        </button>
                    <?php endif; ?>
                </div>
            </div>

            <div class="transactions-section">
                <h2 class="section-title">Recent Transactions</h2>
                <?php if (empty($transactions)): ?>
                    <p style="color: #718096; padding: 2rem; text-align: center;">No transactions found for this card.</p>
                <?php else: ?>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Transaction ID</th>
                                <th>Type</th>
                                <th>Amount</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 style="font-weight: 700; color: <?= ($txn['amount_type'] ?? 'CREDIT') === 'CREDIT' ? '#10b981' : '#ef4444' ?>;">
                                            <?= ($txn['amount_type'] ?? 'CREDIT') === 'CREDIT' ? '+' : '-' ?>
                                            <?= number_format((float)($txn['enter_amount'] ?? 0), 2) ?> <?= esc($txn['card_currency'] ?? '') ?>
                                        </span>
                                    </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>
        <?php else: ?>
            <div style="background: white; padding: 4rem; border-radius: 16px; text-align: center;">
                <i class="fas fa-exclamation-circle" style="font-size: 3.5rem; color: #cbd5e0; margin-bottom: 1rem;"></i>
                <h3>Card Not Found</h3>
                <p style="color: #718096; margin-top: 0.5rem;">The requested card could not be found.</p>
            </div>
        <?php endif; ?>
    </div>

    <!-- Deposit Modal -->
    <div id="depositModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Deposit to Card</h2>
                <span class="close" onclick="closeModal('depositModal')">&times;</span>
            </div>
            <form onsubmit="performDeposit(event)">
                <div class="form-group">
                    <label for="depositAmount">Amount</label>
                    <input type="number" id="depositAmount" step="0.01" min="0.01" required>
                </div>
                <div style="display: flex; gap: 1rem;">
                    <button type="submit" class="btn btn-success" style="flex: 1;">
                        <i class="fas fa-check"></i> Deposit
                    </button>
                    <button type="button" onclick="closeModal('depositModal')" class="btn" style="flex: 1; background: #718096;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Withdraw Modal -->
    <div id="withdrawModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Withdraw from Card</h2>
                <span class="close" onclick="closeModal('withdrawModal')">&times;</span>
            </div>
            <form onsubmit="performWithdraw(event)">
                <div class="form-group">
                    <label for="withdrawAmount">Amount</label>
                    <input type="number" id="withdrawAmount" step="0.01" min="0.01" required>
                </div>
                <div style="display: flex; gap: 1rem;">
                    <button type="submit" class="btn btn-primary" style="flex: 1;">
                        <i class="fas fa-check"></i> Withdraw
                    </button>
                    <button type="button" onclick="closeModal('withdrawModal')" class="btn" style="flex: 1; background: #718096;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const cardUlid = '<?= esc($card_ulid ?? '') ?>';

        function freezeCard() {
            if (confirm('Are you sure you want to freeze this card?')) {
                performAction('freeze');
            }
        }

        function unfreezeCard() {
            if (confirm('Are you sure you want to unfreeze this card?')) {
                performAction('unfreeze');
            }
        }

        function closeCard() {
            if (confirm('WARNING: This will permanently close the card. This action cannot be undone. Are you sure?')) {
                performAction('close');
            }
        }

        function showDepositModal() {
            document.getElementById('depositModal').style.display = 'block';
        }

        function showWithdrawModal() {
            document.getElementById('withdrawModal').style.display = 'block';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        function performDeposit(event) {
            event.preventDefault();
            const amount = document.getElementById('depositAmount').value;
            if (amount <= 0) {
                alert('Amount must be greater than zero');
                return;
            }
            performAction('deposit', amount);
        }

        function performWithdraw(event) {
            event.preventDefault();
            const amount = document.getElementById('withdrawAmount').value;
            if (amount <= 0) {
                alert('Amount must be greater than zero');
                return;
            }
            performAction('withdraw', amount);
        }

        function performAction(action, amount = null) {
            const formData = new FormData();
            formData.append('action', action);
            formData.append('card_ulid', cardUlid);
            if (amount) {
                formData.append('amount', amount);
            }

            fetch('<?= site_url('admin/cardyfie-card-action') ?>', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                alert('An error occurred: ' + error);
            });
        }

        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        }
    </script>
<?= view('admin/partials/footer') ?>
</body>
</html>

