<?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/transactions'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Transaction 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">
        
        <!-- Transaction Amount -->
        <div class="section mt-2 text-center">
            <div class="card">
                <div class="card-body py-3">
                    <?php 
                    $is_debit = !empty($transaction->source_account_id);
                    $icon_color = $is_debit ? 'danger' : 'success';
                    $icon_name = $is_debit ? 'arrow-up-outline' : 'arrow-down-outline';
                    ?>
                    <div class="icon-box bg-<?php echo $icon_color; ?> rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 64px; height: 64px;">
                        <ion-icon name="<?php echo $icon_name; ?>" style="font-size: 32px; color: #fff;"></ion-icon>
                    </div>
                    <h1 class="mb-1 text-<?php echo $icon_color; ?>">
                        <?php echo ($is_debit ? '- ' : '+ ') . format_money($transaction->amount, $transaction->currency); ?>
                    </h1>
                    <span class="badge badge-<?php 
                        echo $transaction->status == 'completed' ? 'success' : 
                            ($transaction->status == 'failed' ? 'danger' : 
                            ($transaction->status == 'reversed' ? 'warning' : 'secondary')); 
                    ?> badge-lg">
                        <?php echo ucfirst($transaction->status); ?>
                    </span>
                </div>
            </div>
        </div>

        <!-- Transaction Details -->
        <div class="section mt-2">
            <div class="section-title">Details</div>
            <ul class="listview flush transparent simple-listview">
                <li>
                    <strong>Reference</strong>
                    <span class="text-muted small"><?php echo $transaction->reference; ?></span>
                </li>
                <li>
                    <strong>Type</strong>
                    <span><?php echo ucfirst($transaction->type); ?></span>
                </li>
                <li>
                    <strong>Category</strong>
                    <span><?php echo ucfirst(str_replace('_', ' ', $transaction->category ?? 'N/A')); ?></span>
                </li>
                <li>
                    <strong>Date</strong>
                    <span><?php echo date('M d, Y H:i:s', strtotime($transaction->created_at)); ?></span>
                </li>
                <?php if (!empty($transaction->narration)): ?>
                <li>
                    <strong>Narration</strong>
                    <span><?php echo htmlspecialchars($transaction->narration); ?></span>
                </li>
                <?php endif; ?>
            </ul>
        </div>

        <!-- Source Account -->
        <?php if ($source_account): ?>
        <div class="section mt-2">
            <div class="section-title">Source Account</div>
            <div class="card">
                <div class="card-body">
                    <a href="<?php echo base_url('admin/user/' . $source_account->user_id); ?>" class="d-flex align-items-center text-decoration-none">
                        <div class="rounded-circle bg-danger d-flex align-items-center justify-content-center me-2" style="width: 42px; height: 42px; min-width: 42px;">
                            <ion-icon name="arrow-up-outline" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div>
                            <strong class="d-block text-primary"><?php echo $source_account->account_number; ?></strong>
                            <small class="text-muted"><?php echo htmlspecialchars($source_account->user_name ?? $source_account->account_name); ?></small>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Destination Account -->
        <?php if ($dest_account): ?>
        <div class="section mt-2">
            <div class="section-title">Destination Account</div>
            <div class="card">
                <div class="card-body">
                    <a href="<?php echo base_url('admin/user/' . $dest_account->user_id); ?>" class="d-flex align-items-center text-decoration-none">
                        <div class="rounded-circle bg-success d-flex align-items-center justify-content-center me-2" style="width: 42px; height: 42px; min-width: 42px;">
                            <ion-icon name="arrow-down-outline" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div>
                            <strong class="d-block text-primary"><?php echo $dest_account->account_number; ?></strong>
                            <small class="text-muted"><?php echo htmlspecialchars($dest_account->user_name ?? $dest_account->account_name); ?></small>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Actions -->
        <div class="section mt-2">
            <a href="<?php echo base_url('admin/edit_transaction/' . $transaction->id); ?>" class="btn btn-primary btn-block">
                <ion-icon name="create-outline"></ion-icon> Edit Transaction
            </a>
        </div>
        
        <?php if ($transaction->status == 'completed' && in_array($transaction->type, ['transfer', 'payment'])): ?>
        <div class="section mt-1 mb-3">
            <button class="btn btn-danger btn-block" data-bs-toggle="modal" data-bs-target="#reverseModal">
                <ion-icon name="refresh-outline"></ion-icon> Reverse Transaction
            </button>
        </div>
        <?php endif; ?>

        <?php if ($transaction->status == 'reversed'): ?>
        <div class="section mt-2">
            <div class="alert alert-warning">
                <strong>Transaction Reversed</strong><br>
                <?php 
                $metadata = json_decode($transaction->metadata, true);
                if (!empty($metadata['reversal_reason'])) {
                    echo 'Reason: ' . htmlspecialchars($metadata['reversal_reason']);
                }
                ?>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- Reverse Modal -->
    <div class="modal fade" id="reverseModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reverse Transaction</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <strong>Warning:</strong> This action will reverse the transaction and return funds to the source account.
                    </div>
                    <div class="form-group basic">
                        <label class="label">Reason for Reversal *</label>
                        <textarea class="form-control" id="reverseReason" rows="3" placeholder="Enter reason for reversal..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="reverseTransaction()">Reverse</button>
                </div>
            </div>
        </div>
    </div>

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

    <script>
    function reverseTransaction() {
        var reason = document.getElementById('reverseReason').value;
        
        if (!reason.trim()) {
            MeridianDialog.error('Please enter a reason for reversal');
            return;
        }
        
        fetch('<?php echo base_url('admin/reverse_transaction/' . $transaction->id); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: 'reason=' + encodeURIComponent(reason) + '&<?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'); ?>
