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

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('accounts'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Account Details</div>
        <div class="right">
            <a href="<?php echo base_url('accounts/statement/' . $account->id); ?>" class="headerButton">
                <ion-icon name="document-text-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <!-- Balance Card -->
        <div class="section mt-2">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <span class="badge bg-light text-primary"><?php echo ucfirst($account->account_type); ?></span>
                            <?php if ($account->is_primary): ?>
                            <span class="badge bg-success">Primary</span>
                            <?php endif; ?>
                        </div>
                        <span class="badge bg-<?php echo $account->status == 'active' ? 'success' : ($account->status == 'frozen' ? 'danger' : 'warning'); ?>">
                            <?php echo ucfirst($account->status); ?>
                        </span>
                    </div>
                    
                    <p class="mb-1 opacity-75">Available Balance</p>
                    <h1 class="mb-1 text-white"><?php echo format_money($wallet->available_balance ?? 0, $account->currency); ?></h1>
                    <p class="mb-0 small opacity-75">
                        Ledger Balance: <?php echo format_money($wallet->ledger_balance ?? 0, $account->currency); ?>
                    </p>
                </div>
            </div>
        </div>

        <!-- Account Info -->
        <div class="section mt-3">
            <div class="section-title">Account Information</div>
            <div class="card">
                <ul class="listview flush transparent simple-listview">
                    <li class="p-2">
                        <strong>Account Number</strong>
                        <span class="text-primary" onclick="copyToClipboard('<?php echo $account->account_number; ?>')">
                            <?php echo $account->account_number; ?>
                            <ion-icon name="copy-outline" class="ms-1"></ion-icon>
                        </span>
                    </li>
                    <li class="p-2">
                        <strong>Account Name</strong>
                        <span><?php echo htmlspecialchars($account->account_name); ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Account Type</strong>
                        <span><?php echo ucfirst($account->account_type); ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Currency</strong>
                        <span><?php echo $account->currency; ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Tier</strong>
                        <span>Tier <?php echo $tier->level ?? 1; ?> - <?php echo $tier->name ?? 'Basic'; ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Opened On</strong>
                        <span><?php echo date('M d, Y', strtotime($account->created_at)); ?></span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="section mt-3">
            <div class="section-title">Quick Actions</div>
            <div class="row">
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('transfers/internal'); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px; margin: 0 auto;">
                            <ion-icon name="swap-horizontal-outline" style="font-size: 26px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-primary">Transfer</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <a href="<?php echo base_url('accounts/statement/' . $account->id); ?>" class="text-decoration-none">
                        <div class="rounded-circle bg-success d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px; margin: 0 auto;">
                            <ion-icon name="document-text-outline" style="font-size: 26px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-success">Statement</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <a href="#" onclick="shareAccount()" class="text-decoration-none">
                        <div class="rounded-circle bg-warning d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px; margin: 0 auto;">
                            <ion-icon name="share-social-outline" style="font-size: 26px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-warning">Share</span>
                    </a>
                </div>
                <div class="col-3 text-center mb-2">
                    <?php if (!$account->is_primary): ?>
                    <a href="#" onclick="setPrimary(<?php echo $account->id; ?>)" class="text-decoration-none">
                        <div class="rounded-circle bg-info d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px; margin: 0 auto;">
                            <ion-icon name="star-outline" style="font-size: 26px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small text-info">Set Primary</span>
                    </a>
                    <?php else: ?>
                    <div class="text-muted">
                        <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px; margin: 0 auto;">
                            <ion-icon name="star" style="font-size: 26px; color: #fff;"></ion-icon>
                        </div>
                        <span class="small">Primary</span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Account Limits -->
        <?php if ($tier): ?>
        <div class="section mt-3">
            <div class="section-title">Account Limits</div>
            <div class="card">
                <ul class="listview flush transparent simple-listview">
                    <li class="p-2">
                        <strong>Daily Transfer Limit</strong>
                        <span><?php echo format_money($tier->daily_transfer_limit ?? 100000, $account->currency); ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Single Transaction Limit</strong>
                        <span><?php echo format_money($tier->single_transaction_limit ?? 50000, $account->currency); ?></span>
                    </li>
                    <li class="p-2">
                        <strong>Maximum Balance</strong>
                        <span><?php echo format_money($tier->max_balance ?? 500000, $account->currency); ?></span>
                    </li>
                </ul>
            </div>
        </div>
        <?php endif; ?>

        <!-- Recent Transactions -->
        <div class="section mt-3 mb-3">
            <div class="section-heading">
                <h2 class="title">Recent Transactions</h2>
                <a href="<?php echo base_url('transactions'); ?>" class="link">View All</a>
            </div>
            
            <?php if (empty($transactions)): ?>
            <div class="card">
                <div class="card-body text-center py-4">
                    <ion-icon name="receipt-outline" style="font-size: 48px; color: #ccc;"></ion-icon>
                    <p class="text-muted mt-2 mb-0">No transactions yet</p>
                </div>
            </div>
            <?php else: ?>
            <div class="transactions">
                <?php foreach (array_slice($transactions, 0, 10) as $txn): ?>
                <?php 
                // Determine if transaction is credit (incoming) or debit (outgoing) for this account
                $is_credit = ($txn->destination_account_id == $account->id);
                $other_account = $is_credit ? $txn->source_account_id : $txn->destination_account_id;
                ?>
                <a href="<?php echo base_url('transactions/view/' . $txn->id); ?>" class="item">
                    <div class="detail">
                        <div class="rounded-circle bg-<?php echo $is_credit ? 'success' : 'danger'; ?> d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; min-width: 42px;">
                            <ion-icon name="<?php echo $is_credit ? 'arrow-down' : 'arrow-up'; ?>-outline" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div class="ms-2">
                            <strong><?php echo ucfirst($txn->type); ?></strong>
                            <p class="text-muted mb-0" style="font-size: 12px;"><?php echo date('M d, Y H:i', strtotime($txn->created_at)); ?></p>
                        </div>
                    </div>
                    <div class="right text-end">
                        <div class="price text-<?php echo $is_credit ? 'success' : 'danger'; ?>" style="font-weight: 600;">
                            <?php echo $is_credit ? '+ ' : '- '; ?>
                            <?php echo format_money($txn->amount, $txn->currency); ?>
                        </div>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

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

    <script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            MeridianDialog.success('Account number copied!');
        });
    }
    
    function shareAccount() {
        var accountInfo = "Account Name: <?php echo htmlspecialchars($account->account_name); ?>\n" +
                         "Account Number: <?php echo $account->account_number; ?>\n" +
                         "Bank: <?php echo get_app_name(); ?>";
        
        if (navigator.share) {
            navigator.share({
                title: 'My <?php echo get_app_name(); ?> Account',
                text: accountInfo
            });
        } else {
            copyToClipboard(accountInfo);
        }
    }
    
    function setPrimary(accountId) {
        MeridianDialog.confirm('Set this as your primary account?', function() {
            fetch(base_url + 'accounts/set_primary/' + accountId, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'csrf_token=' + csrf_token
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    MeridianDialog.success(data.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    MeridianDialog.error(data.message);
                }
            });
        });
    }
    </script>

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