{% extends "base.html" %}

{% block title %}Add Contribution - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Add Contribution</h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="amount" class="form-label">Contribution Amount (₦)</label>
                        <div class="input-group">
                            <span class="input-group-text">₦</span>
                            <input type="number" class="form-control" id="amount" name="amount" 
                                   min="100" step="100" required placeholder="Enter amount">
                        </div>
                        <small class="form-text text-muted">Minimum contribution: ₦100</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="payment_method" class="form-label">Payment Method</label>
                        <select class="form-select" id="payment_method" name="payment_method" required>
                            <option value="manual">Manual Payment (Bank Transfer/Cash)</option>
                            <option value="paystack">Online Payment (Paystack)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <div class="alert alert-info">
                            <h6 class="alert-heading">Payment Instructions</h6>
                            <p class="mb-0" id="payment-instructions">
                                Select a payment method to see instructions.
                            </p>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Add Contribution
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Your Wallet Balance</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-1">Current Balance:</p>
                        <h3 class="text-success">₦{{ "%.2f"|format(wallet.balance if wallet else 0) }}</h3>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-1">Total Contributions:</p>
                        <h3 class="text-primary">₦{{ "%.2f"|format(total_contributions if total_contributions else 0) }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('payment_method').addEventListener('change', function() {
    const instructions = document.getElementById('payment-instructions');
    const method = this.value;
    
    if (method === 'manual') {
        instructions.innerHTML = `
            <strong>Manual Payment Instructions:</strong><br>
            1. Transfer to our bank account<br>
            2. Account Number: 1234567890<br>
            3. Bank: XYZ Bank<br>
            4. Account Name: National Medlab Cooperative<br>
            5. Send receipt to admin for verification
        `;
    } else if (method === 'paystack') {
        instructions.innerHTML = `
            <strong>Online Payment Instructions:</strong><br>
            1. Click "Add Contribution" below<br>
            2. You'll be redirected to Paystack secure payment<br>
            3. Complete payment with card/bank transfer<br>
            4. Your wallet will be updated automatically
        `;
    }
});

// Initialize with manual payment instructions
document.getElementById('payment_method').dispatchEvent(new Event('change'));
</script>
{% endblock %}