<?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"><?php echo htmlspecialchars($category->name); ?></div>
        <div class="right"></div>
    </div>

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

        <?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; ?>

        <!-- Category Info -->
        <div class="section mt-2">
            <div class="card bg-primary text-white">
                <div class="card-body text-center py-4">
                    <?php 
                    $icons = [
                        'internet' => 'globe-outline',
                        'water' => 'water-outline',
                        'education' => 'school-outline',
                        'government' => 'business-outline'
                    ];
                    $icon = isset($icons[$category->slug]) ? $icons[$category->slug] : 'receipt-outline';
                    ?>
                    <ion-icon name="<?php echo $icon; ?>" style="font-size: 48px;"></ion-icon>
                    <h3 class="mt-2 mb-0"><?php echo htmlspecialchars($category->name); ?></h3>
                    <p class="mb-0 opacity-75"><?php echo htmlspecialchars($category->description ?? 'Pay your ' . strtolower($category->name) . ' bills'); ?></p>
                </div>
            </div>
        </div>

        <?php if (empty($providers)): ?>
        <!-- No Providers Available -->
        <div class="section mt-5 text-center">
            <ion-icon name="alert-circle-outline" style="font-size: 64px; color: #ccc;"></ion-icon>
            <h3 class="mt-2">Coming Soon</h3>
            <p class="text-muted">This bill payment service is not yet available.</p>
            <a href="<?php echo base_url('bills'); ?>" class="btn btn-primary mt-2">
                <ion-icon name="chevron-back-outline"></ion-icon> Back to Bills
            </a>
        </div>
        <?php else: ?>
        
        <!-- Select Provider -->
        <div class="section mt-2">
            <div class="section-title">Select Provider</div>
            <ul class="listview image-listview inset">
                <?php foreach ($providers as $provider): ?>
                <li>
                    <a href="#" class="item provider-item" data-provider="<?php echo $provider->id; ?>" data-name="<?php echo htmlspecialchars($provider->name); ?>">
                        <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="<?php echo $icon; ?>" class="text-white" style="font-size: 20px;"></ion-icon>
                        </div>
                        <div class="in" style="margin-left: 16px;">
                            <div><?php echo htmlspecialchars($provider->name); ?></div>
                            <!-- <ion-icon name="chevron-forward-outline" class="text-muted"></ion-icon> -->
                        </div>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <!-- Payment Form (Hidden by default) -->
        <div id="paymentFormSection" style="display: none;">
            <form action="<?php echo base_url('bills/pay'); ?>" method="POST" id="billForm">
                <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                <input type="hidden" name="category_id" value="<?php echo $category->id; ?>">
                <input type="hidden" name="provider_id" id="selectedProvider" value="">

                <!-- Customer ID -->
                <div class="section mt-2">
                    <div class="section-title">Customer Details</div>
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group basic">
                                <label class="label">Customer ID / Account Number</label>
                                <div class="input-wrapper">
                                    <input type="text" class="form-control" name="customer_id" id="customerId" 
                                           placeholder="Enter your customer ID" required>
                                    <i class="clear-input">
                                        <ion-icon name="close-circle"></ion-icon>
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Amount -->
                <div class="section mt-2">
                    <div class="section-title">Amount</div>
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group basic">
                                <div class="input-group mb-2">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" name="amount" id="billAmount" 
                                           placeholder="0.00" min="100" step="1" required>
                                </div>
                                <div class="input-info">Minimum: $100</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Source Account -->
                <div class="section mt-2">
                    <div class="section-title">Pay From</div>
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group basic">
                                <select class="form-control" name="account_id" id="sourceAccount" required>
                                    <option value="">Select Account</option>
                                    <?php foreach ($accounts as $account): ?>
                                    <option value="<?php echo $account->id; ?>">
                                        <?php echo $account->account_number; ?> - <?php echo $account->account_type; ?>
                                        (<?php echo format_money($account->available_balance, $account->currency); ?>)
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <?php if ($user->user_type !== 'admin'): ?>
                <!-- Transaction PIN -->
                <div class="section mt-2">
                    <div class="section-title">Transaction PIN</div>
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <input type="password" class="form-control" name="pin" 
                                           placeholder="Enter 4-digit PIN" maxlength="4" 
                                           pattern="[0-9]{4}" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Submit -->
                <div class="section mt-3 mb-3">
                    <button type="submit" class="btn btn-primary btn-block btn-lg" id="submitBtn">
                        <ion-icon name="<?php echo $icon; ?>"></ion-icon>
                        Pay Now
                    </button>
                </div>
            </form>
        </div>
        <?php endif; ?>
    </div>

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

<script>
document.querySelectorAll('.provider-item').forEach(function(item) {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        var providerId = this.dataset.provider;
        var providerName = this.dataset.name;
        
        // Update hidden field
        document.getElementById('selectedProvider').value = providerId;
        
        // Show payment form
        document.getElementById('paymentFormSection').style.display = 'block';
        
        // Highlight selected provider
        document.querySelectorAll('.provider-item').forEach(function(el) {
            el.closest('li').classList.remove('active');
        });
        this.closest('li').classList.add('active');
        
        // Scroll to form
        document.getElementById('paymentFormSection').scrollIntoView({ behavior: 'smooth' });
    });
});

document.getElementById('billForm').addEventListener('submit', function(e) {
    var btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
});
</script>

<style>
.provider-item li.active {
    background-color: rgba(30, 116, 253, 0.1);
}
</style>

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