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

    <!-- App Header -->
    <div class="appHeader bg-primary text-light">
        <div class="left">
            <a href="<?php echo base_url('admin/cards'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Card Details</div>
        <div class="right">
            <a href="#" class="headerButton" data-bs-toggle="modal" data-bs-target="#adminSidebar">
                <ion-icon name="menu-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <?php if ($this->session->flashdata('success')): ?>
        <div class="section mt-2">
            <div class="alert alert-success"><?php echo $this->session->flashdata('success'); ?></div>
        </div>
        <?php endif; ?>

        <!-- Card Visual -->
        <div class="section mt-2">
            <div class="card bg-<?php echo $card->card_brand == 'visa' ? 'primary' : 'dark'; ?> text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <span class="badge badge-<?php 
                            echo $card->status == 'active' ? 'success' : 
                                ($card->status == 'frozen' ? 'info' : 
                                ($card->status == 'blocked' ? 'danger' : 'secondary')); 
                        ?>">
                            <?php echo ucfirst($card->status); ?>
                        </span>
                        <span class="text-uppercase small"><?php echo ucfirst($card->card_type); ?></span>
                    </div>
                    <h3 class="mb-3 letter-spacing-1"><?php echo $card->card_number_masked; ?></h3>
                    <div class="d-flex justify-content-between">
                        <div>
                            <small class="opacity-75">Cardholder</small>
                            <p class="mb-0"><?php echo htmlspecialchars($card->cardholder_name ?? strtoupper($card_user->first_name . ' ' . $card_user->last_name)); ?></p>
                        </div>
                        <div class="text-end">
                            <small class="opacity-75">Expires</small>
                            <p class="mb-0"><?php echo $card->expiry_month; ?>/<?php echo $card->expiry_year; ?></p>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-end mt-3">
                        <div>
                            <small class="opacity-75">Balance</small>
                            <h4 class="mb-0"><?php echo format_money($card->balance ?? 0, $card->currency); ?></h4>
                        </div>
                        <div>
                            <img src="<?php echo base_url('assets/img/' . $card->card_brand . '-logo.png'); ?>" 
                                 alt="<?php echo $card->card_brand; ?>" 
                                 style="height: 30px;"
                                 onerror="this.style.display='none'">
                            <span class="text-uppercase fw-bold"><?php echo $card->card_brand; ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card Owner -->
        <div class="section mt-2">
            <div class="section-title">Card Owner</div>
            <div class="card">
                <a href="<?php echo base_url('admin/user/' . $card_user->id); ?>" class="card-body d-flex align-items-center text-decoration-none">
                    <img src="<?php echo get_user_avatar($card_user, 'w48'); ?>" alt="avatar" class="imaged w48 rounded-circle me-3">
                    <div>
                        <strong><?php echo htmlspecialchars($card_user->first_name . ' ' . $card_user->last_name); ?></strong>
                        <p class="text-muted mb-0 small"><?php echo $card_user->email; ?></p>
                    </div>
                    <ion-icon name="chevron-forward-outline" class="ms-auto text-muted"></ion-icon>
                </a>
            </div>
        </div>

        <!-- Card Details -->
        <div class="section mt-2">
            <div class="section-title">Card Information</div>
            <ul class="listview flush transparent simple-listview">
                <li>
                    <strong>Card ID</strong>
                    <span>#<?php echo $card->id; ?></span>
                </li>
                <li>
                    <strong>Card Type</strong>
                    <span><?php echo ucfirst($card->card_type); ?></span>
                </li>
                <li>
                    <strong>Card Brand</strong>
                    <span><?php echo ucfirst($card->card_brand); ?></span>
                </li>
                <li>
                    <strong>Linked Account</strong>
                    <span><?php echo $card_account->account_number; ?></span>
                </li>
                <li>
                    <strong>Currency</strong>
                    <span><?php echo $card->currency; ?></span>
                </li>
                <li>
                    <strong>Created</strong>
                    <span><?php echo date('M d, Y', strtotime($card->created_at)); ?></span>
                </li>
                <?php if (!empty($card->activated_at)): ?>
                <li>
                    <strong>Activated</strong>
                    <span><?php echo date('M d, Y H:i', strtotime($card->activated_at)); ?></span>
                </li>
                <?php endif; ?>
            </ul>
        </div>

        <!-- Card Limits -->
        <div class="section mt-2">
            <div class="section-title">Limits</div>
            <ul class="listview flush transparent simple-listview">
                <li>
                    <strong>Daily Limit</strong>
                    <span><?php echo format_money($card->daily_limit ?? 5000, $card->currency); ?></span>
                </li>
                <li>
                    <strong>Monthly Limit</strong>
                    <span><?php echo format_money($card->monthly_limit ?? 50000, $card->currency); ?></span>
                </li>
                <li>
                    <strong>Per Transaction</strong>
                    <span><?php echo format_money($card->single_transaction_limit ?? 2500, $card->currency); ?></span>
                </li>
            </ul>
        </div>

        <!-- Card Controls -->
        <div class="section mt-2">
            <div class="section-title">Controls</div>
            <ul class="listview flush transparent simple-listview">
                <li>
                    <strong>Online Payments</strong>
                    <span class="badge badge-<?php echo ($card->is_online_enabled ?? 1) ? 'success' : 'danger'; ?>">
                        <?php echo ($card->is_online_enabled ?? 1) ? 'Enabled' : 'Disabled'; ?>
                    </span>
                </li>
                <li>
                    <strong>POS Payments</strong>
                    <span class="badge badge-<?php echo ($card->is_pos_enabled ?? 1) ? 'success' : 'danger'; ?>">
                        <?php echo ($card->is_pos_enabled ?? 1) ? 'Enabled' : 'Disabled'; ?>
                    </span>
                </li>
                <li>
                    <strong>ATM Withdrawals</strong>
                    <span class="badge badge-<?php echo ($card->is_atm_enabled ?? 0) ? 'success' : 'danger'; ?>">
                        <?php echo ($card->is_atm_enabled ?? 0) ? 'Enabled' : 'Disabled'; ?>
                    </span>
                </li>
                <li>
                    <strong>International</strong>
                    <span class="badge badge-<?php echo ($card->is_international_enabled ?? 0) ? 'success' : 'danger'; ?>">
                        <?php echo ($card->is_international_enabled ?? 0) ? 'Enabled' : 'Disabled'; ?>
                    </span>
                </li>
            </ul>
        </div>

        <!-- Actions -->
        <div class="section mt-2">
            <a href="<?php echo base_url('admin/edit_card/' . $card->id); ?>" class="btn btn-primary btn-block btn-lg">
                <ion-icon name="create-outline"></ion-icon> Edit Card
            </a>
        </div>

        <!-- Quick Actions -->
        <div class="section mt-1 mb-3">
            <div class="row">
                <?php if ($card->status == 'active'): ?>
                <div class="col-6">
                    <button class="btn btn-warning btn-block" onclick="freezeCard()">
                        <ion-icon name="snow-outline"></ion-icon> Freeze
                    </button>
                </div>
                <div class="col-6">
                    <button class="btn btn-danger btn-block" onclick="blockCard()">
                        <ion-icon name="ban-outline"></ion-icon> Block
                    </button>
                </div>
                <?php elseif ($card->status == 'frozen'): ?>
                <div class="col-12">
                    <button class="btn btn-success btn-block" onclick="unfreezeCard()">
                        <ion-icon name="flame-outline"></ion-icon> Unfreeze Card
                    </button>
                </div>
                <?php elseif ($card->status == 'inactive'): ?>
                <div class="col-12">
                    <button class="btn btn-success btn-block" onclick="activateCard()">
                        <ion-icon name="checkmark-circle-outline"></ion-icon> Activate Card
                    </button>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Recent Transactions -->
        <?php if (!empty($card_transactions)): ?>
        <div class="section mt-2 mb-3">
            <div class="section-title">Recent Card Transactions</div>
            <ul class="listview flush transparent simple-listview">
                <?php foreach ($card_transactions as $txn): ?>
                <li>
                    <div>
                        <strong><?php echo ucfirst($txn->type); ?></strong>
                        <p class="text-muted mb-0 small"><?php echo date('M d, Y H:i', strtotime($txn->created_at)); ?></p>
                    </div>
                    <span class="text-<?php echo $txn->type == 'funding' ? 'success' : 'danger'; ?>">
                        <?php echo $txn->type == 'funding' ? '+' : '-'; ?>
                        <?php echo format_money($txn->amount, $txn->currency); ?>
                    </span>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>
    </div>

    <!-- Admin Sidebar -->
    <?php $this->load->view('admin/partials/sidebar'); ?>

    <script>
    function freezeCard() {
        MeridianDialog.confirm('Freeze this card?', 'The cardholder will not be able to use this card until it is unfrozen.', function() {
            updateCardStatus('frozen');
        });
    }

    function unfreezeCard() {
        MeridianDialog.confirm('Unfreeze this card?', 'The cardholder will be able to use this card again.', function() {
            updateCardStatus('active');
        });
    }

    function blockCard() {
        MeridianDialog.confirm('Block this card?', 'This action is permanent. The card will be deactivated and cannot be used again.', function() {
            updateCardStatus('blocked');
        });
    }

    function activateCard() {
        MeridianDialog.confirm('Activate this card?', 'The cardholder will be able to use this card.', function() {
            updateCardStatus('active');
        });
    }

    function updateCardStatus(status) {
        fetch('<?php echo base_url('admin/edit_card/' . $card->id); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: 'status=' + encodeURIComponent(status) + '&<?php echo $this->security->get_csrf_token_name(); ?>=<?php echo $this->security->get_csrf_hash(); ?>'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                MeridianDialog.success(data.message, function() {
                    location.reload();
                });
            } else {
                MeridianDialog.error(data.message || 'An error occurred');
            }
        })
        .catch(error => {
            MeridianDialog.error('An error occurred. Please try again.');
        });
    }
    </script>

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