<?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>Cardyfie Cards - 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-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
        .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; }
        .report-stat span { color: #64748b; font-weight: 500; font-size: 0.9rem; }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .card-item {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .card-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f0f0f0;
        }

        .card-name {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1a202c;
        }

        .card-status {
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

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

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

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

        .card-info {
            margin-bottom: 1rem;
        }

        .card-info-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            font-size: 0.9rem;
        }

        .card-info-label {
            color: #718096;
            font-weight: 500;
        }

        .card-info-value {
            color: #1a202c;
            font-weight: 600;
        }

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

        .card-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

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

        .btn-sm {
            padding: 0.5rem 0.8rem;
            font-size: 0.8rem;
        }

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

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

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

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

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

        .btn-info {
            background: #3b82f6;
            color: white;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .pagination a, .pagination span {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            text-decoration: none;
            color: #4a5568;
            background: white;
            border: 1px solid #e2e8f0;
        }

        .pagination a:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .pagination .active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .no-data {
            text-align: center;
            padding: 4rem;
            color: #718096;
            background: white;
            border-radius: 16px;
        }

        .no-data i {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: #cbd5e0;
        }

        .error-message {
            background: #fee2e2;
            color: #991b1b;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

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

        @media (max-width: 768px) {
            .cards-grid {
                grid-template-columns: 1fr;
            }
        }
    </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> Cardyfie Cards</h1>
        <div class="breadcrumb">
            <a href="<?= site_url('admin/dashboard') ?>">Dashboard</a>
            <i class="fas fa-chevron-right"></i>
            <span>Cardyfie Cards</span>
        </div>
    </div>

    <div class="report-section">
        <div class="report-stats">
            <div class="report-stat"><span>Cards on this page:</span> <?= count($cards ?? []) ?></div>
            <?php if (!empty($pagination['total'] ?? null)): ?>
            <div class="report-stat"><span>Total cards:</span> <?= (int)($pagination['total'] ?? 0) ?></div>
            <?php endif; ?>
        </div>
    </div>

    <?php if (isset($error)): ?>
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i> <?= esc($error) ?>
            </div>
        <?php endif; ?>

        <?php if (empty($cards)): ?>
            <div class="no-data">
                <i class="fas fa-credit-card"></i>
                <h3>No Cards Found</h3>
                <p>There are no cards available at the moment.</p>
            </div>
        <?php else: ?>
            <div class="cards-grid">
                <?php foreach ($cards as $card): ?>
                    <div class="card-item">
                        <div class="card-header">
                            <div class="card-name"><?= esc($card['card_name'] ?? 'N/A') ?></div>
                            <span class="card-status status-<?= strtolower($card['status'] ?? 'enabled') ?>">
                                <?= esc($card['status'] ?? 'UNKNOWN') ?>
                            </span>
                        </div>
                        <div class="card-info">
                            <div class="card-info-row">
                                <span class="card-info-label">Card Number:</span>
                                <span class="card-info-value"><?= esc($card['masked_pan'] ?? 'N/A') ?></span>
                            </div>
                            <div class="card-info-row">
                                <span class="card-info-label">Currency:</span>
                                <span class="card-info-value"><?= esc($card['card_currency_code'] ?? 'N/A') ?></span>
                            </div>
                            <div class="card-info-row">
                                <span class="card-info-label">Type:</span>
                                <span class="card-info-value"><?= esc(ucfirst($card['card_type'] ?? 'N/A')) ?></span>
                            </div>
                            <div class="card-info-row">
                                <span class="card-info-label">Provider:</span>
                                <span class="card-info-value"><?= esc(ucfirst($card['card_provider'] ?? 'N/A')) ?></span>
                            </div>
                            <div class="card-info-row">
                                <span class="card-info-label">Expires:</span>
                                <span class="card-info-value"><?= esc($card['card_exp_time'] ?? 'N/A') ?></span>
                            </div>
                            <div class="card-balance">
                                <?= number_format((float)($card['card_balance'] ?? 0), 2) ?> <?= esc($card['card_currency_code'] ?? '') ?>
                            </div>
                        </div>
                        <div class="card-actions">
                            <a href="<?= site_url('admin/cardyfie-card/' . ($card['ulid'] ?? '')) ?>" class="btn btn-info btn-sm">
                                <i class="fas fa-eye"></i> View
                            </a>
                            <?php if (($card['status'] ?? '') === 'ENABLED'): ?>
                                <button onclick="freezeCard('<?= esc($card['ulid'] ?? '') ?>')" class="btn btn-warning btn-sm">
                                    <i class="fas fa-snowflake"></i> Freeze
                                </button>
                            <?php elseif (($card['status'] ?? '') === 'FROZEN'): ?>
                                <button onclick="unfreezeCard('<?= esc($card['ulid'] ?? '') ?>')" class="btn btn-success btn-sm">
                                    <i class="fas fa-fire"></i> Unfreeze
                                </button>
                            <?php endif; ?>
                            <?php if (($card['status'] ?? '') !== 'CLOSED'): ?>
                                <button onclick="closeCard('<?= esc($card['ulid'] ?? '') ?>')" class="btn btn-danger btn-sm">
                                    <i class="fas fa-times-circle"></i> Close
                                </button>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <?php if (isset($pagination) && !empty($pagination)): ?>
                <div class="pagination">
                    <?php if (isset($pagination['prev_page_url']) && $pagination['prev_page_url']): ?>
                        <a href="<?= site_url('admin/cardyfie-cards?page=' . ($page - 1)) ?>">
                            <i class="fas fa-chevron-left"></i> Previous
                        </a>
                    <?php endif; ?>
                    
                    <span class="active">Page <?= $pagination['current_page'] ?? $page ?> of <?= $pagination['last_page'] ?? 1 ?></span>
                    
                    <?php if (isset($pagination['next_page_url']) && $pagination['next_page_url']): ?>
                        <a href="<?= site_url('admin/cardyfie-cards?page=' . ($page + 1)) ?>">
                            Next <i class="fas fa-chevron-right"></i>
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>

    <!-- Modal for Actions -->
    <div id="actionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="modalTitle">Card Action</h2>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div id="modalBody"></div>
        </div>
    </div>

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

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

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

        function performAction(action, ulid) {
            const formData = new FormData();
            formData.append('action', action);
            formData.append('card_ulid', ulid);

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

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

        window.onclick = function(event) {
            const modal = document.getElementById('actionModal');
            if (event.target == modal) {
                closeModal();
            }
        }
    </script>
<?= view('admin/partials/footer') ?>
</body>
</html>

