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

// Determine if debit or credit
$is_debit = $source_account && $source_account->user_id == $user->id;
?>

<style>
@media print {
    .appHeader, .appBottomMenu, .no-print {
        display: none !important;
    }
    #appCapsule {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .receipt-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}
.receipt-card {
    max-width: 400px;
    margin: 0 auto;
}
.receipt-logo {
    width: 60px;
    height: 60px;
}
.receipt-divider {
    border-top: 1px dashed #ccc;
    margin: 15px 0;
}
</style>

    <!-- App Header -->
    <div class="appHeader no-print">
        <div class="left">
            <a href="<?php echo base_url('transactions/view/' . $transaction->id); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Transaction Receipt</div>
        <div class="right">
            <a href="#" class="headerButton" onclick="window.print(); return false;">
                <ion-icon name="print-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-2 inset">
            <div class="card receipt-card">
                <div class="card-body text-center">
                    <!-- Bank Logo/Name -->
                    <div class="mb-3">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mx-auto receipt-logo">
                            <ion-icon name="wallet-outline" class="text-white" style="font-size: 28px;"></ion-icon>
                        </div>
                        <h4 class="mt-2 mb-0"><?php echo get_app_name(); ?></h4>
                        <small class="text-muted">Transaction Receipt</small>
                    </div>

                    <div class="receipt-divider"></div>

                    <!-- Status Icon -->
                    <div class="my-3">
                        <div class="rounded-circle bg-<?php echo $transaction->status == 'completed' ? 'success' : ($transaction->status == 'failed' ? 'danger' : 'warning'); ?> d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                            <ion-icon name="<?php echo $transaction->status == 'completed' ? 'checkmark-outline' : ($transaction->status == 'failed' ? 'close-outline' : 'time-outline'); ?>" class="text-white" style="font-size: 30px;"></ion-icon>
                        </div>
                        <h2 class="mt-2 mb-0 <?php echo $is_debit ? 'text-danger' : 'text-success'; ?>">
                            <?php echo ($is_debit ? '-' : '+') . format_money($transaction->amount, $transaction->currency); ?>
                        </h2>
                        <span class="badge badge-<?php echo $transaction->status == 'completed' ? 'success' : ($transaction->status == 'failed' ? 'danger' : 'warning'); ?>">
                            <?php echo ucfirst($transaction->status); ?>
                        </span>
                    </div>

                    <div class="receipt-divider"></div>

                    <!-- Transaction Details -->
                    <div class="text-start">
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Reference</div>
                            <div class="col-7 text-end fw-bold" style="font-size: 11px; word-break: break-all;"><?php echo $transaction->reference; ?></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Type</div>
                            <div class="col-7 text-end"><?php echo ucfirst(str_replace('_', ' ', $transaction->type)); ?></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Date</div>
                            <div class="col-7 text-end"><?php echo date('M d, Y', strtotime($transaction->created_at)); ?></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Time</div>
                            <div class="col-7 text-end"><?php echo date('H:i:s', strtotime($transaction->created_at)); ?></div>
                        </div>
                        <?php if ($transaction->narration): ?>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Narration</div>
                            <div class="col-7 text-end"><?php echo htmlspecialchars($transaction->narration); ?></div>
                        </div>
                        <?php endif; ?>
                        <?php if ($transaction->fee > 0): ?>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">Fee</div>
                            <div class="col-7 text-end"><?php echo format_money($transaction->fee, $transaction->currency); ?></div>
                        </div>
                        <?php endif; ?>
                    </div>

                    <div class="receipt-divider"></div>

                    <!-- Account Details -->
                    <div class="text-start">
                        <?php if ($source_account): ?>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">From Account</div>
                            <div class="col-7 text-end"><?php echo $source_account->account_number; ?></div>
                        </div>
                        <?php endif; ?>
                        <?php if ($dest_account): ?>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">To Account</div>
                            <div class="col-7 text-end"><?php echo $dest_account->account_number; ?></div>
                        </div>
                        <?php endif; ?>
                        <?php 
                        $meta = $transaction->metadata ? (is_string($transaction->metadata) ? json_decode($transaction->metadata, true) : $transaction->metadata) : null;
                        if (!$dest_account && $meta && in_array($transaction->category, ['external', 'international'])): 
                            $recipient = $meta['recipient_name'] ?? '';
                            $recipient_acc = $meta['recipient_account'] ?? '';
                        ?>
                        <div class="row mb-2">
                            <div class="col-5 text-muted">To</div>
                            <div class="col-7 text-end"><?php echo htmlspecialchars($recipient); ?><?php if ($recipient_acc): ?> (<?php echo htmlspecialchars($recipient_acc); ?>)<?php endif; ?></div>
                        </div>
                        <?php endif; ?>
                    </div>

                    <div class="receipt-divider"></div>

                    <!-- Footer -->
                    <div class="text-center text-muted" style="font-size: 11px;">
                        <p class="mb-1">Thank you for banking with us</p>
                        <p class="mb-0">www.meridianbank.com</p>
                        <p class="mb-0">Customer Support: 1-800-MERIDIAN</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="section inset mt-3 mb-3 no-print">
            <div class="row">
                <div class="col-6">
                    <a href="#" class="btn btn-outline-primary btn-block" onclick="window.print(); return false;">
                        <ion-icon name="print-outline"></ion-icon> Print
                    </a>
                </div>
                <div class="col-6">
                    <a href="<?php echo base_url('transactions/view/' . $transaction->id); ?>" class="btn btn-primary btn-block">
                        <ion-icon name="arrow-back-outline"></ion-icon> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

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

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