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

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('dashboard'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Pay Bills</div>
        <div class="right"></div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <?php if ($this->session->flashdata('success')): ?>
        <div class="section mt-2">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <?php echo $this->session->flashdata('success'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
        <?php endif; ?>

        <!-- Bill Categories -->
        <div class="section mt-2">
            <div class="section-title">Select Category</div>
            <div class="card">
                <div class="card-body pt-2 pb-2">
                    <div class="row">
                        <?php 
                        $icons = [
                            'airtime' => 'call-outline',
                            'data' => 'wifi-outline',
                            'electricity' => 'flash-outline',
                            'tv' => 'tv-outline',
                            'internet' => 'globe-outline',
                            'water' => 'water-outline',
                            'education' => 'school-outline',
                            'government' => 'business-outline'
                        ];
                        $colors = [
                            'airtime' => 'warning',
                            'data' => 'primary',
                            'electricity' => 'danger',
                            'tv' => 'success',
                            'internet' => 'info',
                            'water' => 'primary',
                            'education' => 'secondary',
                            'government' => 'dark'
                        ];
                        // Define which categories have dedicated pages
                        $dedicated_pages = ['airtime', 'electricity', 'tv', 'data'];
                        foreach ($categories as $category): 
                        $color = isset($colors[$category->slug]) ? $colors[$category->slug] : 'primary';
                        $link = in_array($category->slug, $dedicated_pages) 
                            ? base_url('bills/' . $category->slug)
                            : base_url('bills/category/' . $category->slug);
                        ?>
                        <div class="col-3 mb-2">
                            <a href="<?php echo $link; ?>" class="d-flex flex-column align-items-center text-decoration-none">
                                <div class="rounded-circle bg-<?php echo $color; ?> d-flex align-items-center justify-content-center mb-1" style="width: 56px; height: 56px;">
                                    <ion-icon name="<?php echo isset($icons[$category->slug]) ? $icons[$category->slug] : 'receipt-outline'; ?>" style="font-size: 26px; color: #fff;"></ion-icon>
                                </div>
                                <span class="small text-<?php echo $color; ?>" style="font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;"><?php echo htmlspecialchars($category->name); ?></span>
                            </a>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Saved Billers -->
        <?php if (!empty($saved_billers)): ?>
        <div class="section mt-2">
            <div class="section-title">Saved Billers</div>
            <ul class="listview image-listview flush">
                <?php foreach ($saved_billers as $biller): ?>
                <li>
                    <a href="<?php echo base_url('bills/category/' . $biller->category_id . '?biller=' . $biller->id); ?>" class="item">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; min-width: 42px;">
                            <ion-icon name="bookmark-outline" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div class="in">
                            <div>
                                <strong><?php echo htmlspecialchars($biller->nickname ?: $biller->customer_name ?: $biller->customer_id); ?></strong>
                                <p class="mb-0 text-muted small"><?php echo $biller->provider_name; ?> - <?php echo $biller->customer_id; ?></p>
                            </div>
                        </div>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <!-- Recent Payments -->
        <?php if (!empty($recent_payments)): ?>
        <div class="section mt-2 mb-3">
            <div class="section-heading">
                <h2 class="title">Recent Payments</h2>
                <a href="<?php echo base_url('bills/history'); ?>" class="link">View All</a>
            </div>
            <ul class="listview image-listview flush">
                <?php foreach ($recent_payments as $payment): ?>
                <li>
                    <a href="<?php echo base_url('transactions/view/' . $payment->transaction_id); ?>" class="item">
                        <div class="rounded-circle bg-<?php echo $payment->status == 'completed' ? 'success' : ($payment->status == 'processing' ? 'warning' : 'danger'); ?> d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; min-width: 42px;">
                            <ion-icon name="<?php echo $payment->icon ?: 'receipt-outline'; ?>" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div class="in ml-4" style="margin-left: 16px;">
                            <div>
                                <strong><?php echo htmlspecialchars($payment->provider_name); ?></strong>
                                <p class="mb-0 text-muted small"><?php echo $payment->customer_id; ?></p>
                            </div>
                            <div class="text-end">
                                <span class="text-danger fw-bold">-<?php echo format_money($payment->amount); ?></span>
                                <p class="mb-0 small text-muted"><?php echo date('M d', strtotime($payment->created_at)); ?></p>
                            </div>
                        </div>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>
    </div>

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

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