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

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('bills'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Payment History</div>
        <div class="right">
            <a href="#" class="headerButton" data-bs-toggle="modal" data-bs-target="#filterModal">
                <ion-icon name="filter-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <!-- Filter Tags -->
        <div class="section mt-2">
            <div class="d-flex gap-1 flex-wrap">
                <a href="<?php echo base_url('bills/history'); ?>" class="badge <?php echo empty($this->input->get('category')) && empty($this->input->get('status')) ? 'bg-primary' : 'bg-secondary'; ?>">All</a>
                <?php foreach ($categories as $cat): ?>
                <a href="<?php echo base_url('bills/history?category=' . $cat->id); ?>" 
                   class="badge <?php echo $this->input->get('category') == $cat->id ? 'bg-primary' : 'bg-secondary'; ?>">
                    <?php echo $cat->name; ?>
                </a>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Payments List -->
        <?php if (empty($payments)): ?>
        <div class="section mt-5 text-center">
            <ion-icon name="receipt-outline" style="font-size: 64px; color: #6c757d;"></ion-icon>
            <h3 class="mt-2">No Payments</h3>
            <p class="text-muted">You haven't made any bill payments yet</p>
            <a href="<?php echo base_url('bills'); ?>" class="btn btn-primary">
                <ion-icon name="add-outline"></ion-icon> Pay a Bill
            </a>
        </div>
        <?php else: ?>
        <?php 
        $current_date = '';
        foreach ($payments as $payment): 
            $payment_date = date('F j, Y', strtotime($payment->created_at));
            if ($payment_date !== $current_date):
                $current_date = $payment_date;
        ?>
        <div class="section-title mt-2 ml-2" style="margin-left: 16px;"><?php echo $payment_date; ?></div>
        <?php endif; ?>
        <div class="section mb-1">
            <a href="<?php echo base_url('transactions/view/' . $payment->transaction_id); ?>" class="card">
                <div class="card-body py-2">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-<?php 
                            echo $payment->status == 'completed' ? 'success' : 
                                ($payment->status == 'processing' ? 'warning' : 'danger'); 
                        ?> d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px; min-width: 48px;">
                            <?php 
                            $icon = 'receipt-outline';
                            if (isset($payment->category_slug)) {
                                switch($payment->category_slug) {
                                    case 'airtime': $icon = 'call-outline'; break;
                                    case 'data': $icon = 'wifi-outline'; break;
                                    case 'electricity': $icon = 'flash-outline'; break;
                                    case 'tv': $icon = 'tv-outline'; break;
                                    case 'internet': $icon = 'globe-outline'; break;
                                    case 'water': $icon = 'water-outline'; break;
                                    default: $icon = 'receipt-outline';
                                }
                            }
                            ?>
                            <ion-icon name="<?php echo $icon; ?>" class="text-white" style="font-size: 22px;"></ion-icon>
                        </div>
                        <div class="flex-grow-1">
                            <h4 class="mb-0" style="font-size: 15px;"><?php echo htmlspecialchars($payment->provider_name); ?></h4>
                            <p class="mb-0 text-muted small">
                                <?php echo $payment->category_name; ?> • <?php echo $payment->customer_id; ?>
                            </p>
                        </div>
                        <div class="text-end">
                            <span class="text-danger fw-bold" style="font-size: 15px;">-<?php echo format_money($payment->amount); ?></span>
                            <p class="mb-0 small">
                                <span class="badge bg-<?php 
                                    echo $payment->status == 'completed' ? 'success' : 
                                        ($payment->status == 'processing' ? 'warning' : 'danger'); 
                                ?>"><?php echo ucfirst($payment->status); ?></span>
                            </p>
                        </div>
                        <ion-icon name="chevron-forward-outline" class="ms-2 text-muted"></ion-icon>
                    </div>
                </div>
            </a>
        </div>
        <?php endforeach; ?>

        <!-- Pagination -->
        <?php if (count($payments) >= 20): ?>
        <div class="section mt-2 mb-3">
            <div class="d-flex justify-content-between">
                <?php if ($page > 1): ?>
                <a href="<?php echo base_url('bills/history?page=' . ($page - 1)); ?>" class="btn btn-outline-primary">
                    <ion-icon name="chevron-back-outline"></ion-icon> Previous
                </a>
                <?php else: ?>
                <span></span>
                <?php endif; ?>
                
                <a href="<?php echo base_url('bills/history?page=' . ($page + 1)); ?>" class="btn btn-outline-primary">
                    Next <ion-icon name="chevron-forward-outline"></ion-icon>
                </a>
            </div>
        </div>
        <?php endif; ?>
        <?php endif; ?>

    </div>

    <!-- Filter Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Filter Payments</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form action="<?php echo base_url('bills/history'); ?>" method="GET" id="filterForm">
                        <div class="form-group basic mb-3">
                            <label class="label">Category</label>
                            <select class="form-control" name="category">
                                <option value="">All Categories</option>
                                <?php foreach ($categories as $cat): ?>
                                <option value="<?php echo $cat->id; ?>" <?php echo $this->input->get('category') == $cat->id ? 'selected' : ''; ?>>
                                    <?php echo $cat->name; ?>
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="form-group basic mb-3">
                            <label class="label">Status</label>
                            <select class="form-control" name="status">
                                <option value="">All Status</option>
                                <option value="completed" <?php echo $this->input->get('status') == 'completed' ? 'selected' : ''; ?>>Completed</option>
                                <option value="processing" <?php echo $this->input->get('status') == 'processing' ? 'selected' : ''; ?>>Processing</option>
                                <option value="failed" <?php echo $this->input->get('status') == 'failed' ? 'selected' : ''; ?>>Failed</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="<?php echo base_url('bills/history'); ?>" class="btn btn-secondary">Clear</a>
                    <button type="submit" form="filterForm" class="btn btn-primary">Apply Filter</button>
                </div>
            </div>
        </div>
    </div>

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

<style>
.section a.card {
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.section a.card:hover {
    transform: translateX(3px);
}
.section a.card h4 {
    color: inherit;
}
</style>

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