{% extends 'base.html' %}
{% load humanize %}

{% block title %}Process Payment - Sale {{ sale.invoice_number }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-money-bill-wave"></i> Process Payment</h2>
    <div>
        <a href="{% url 'sale_detail' sale.pk %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Sale
        </a>
        <a href="{% url 'pos_dashboard' %}" class="btn btn-primary">
            <i class="fas fa-cash-register"></i> POS Dashboard
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Invoice: {{ sale.invoice_number }}</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Date:</th>
                                <td>{{ sale.created_at|date:"d M Y, H:i" }}</td>
                            </tr>
                            <tr>
                                <th>Shop:</th>
                                <td>{{ sale.shop.name }} ({{ sale.shop.code }})</td>
                            </tr>
                            <tr>
                                <th>Cashier:</th>
                                <td>{{ sale.cashier.username }}</td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    {% if sale.status == 'draft' %}
                                    <span class="badge bg-secondary">Draft</span>
                                    {% elif sale.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                    {% elif sale.status == 'completed' %}
                                    <span class="badge bg-success">Completed</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Subtotal:</th>
                                <td class="text-end">GH₵ {{ sale.subtotal|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <th>Discount:</th>
                                <td class="text-end text-danger">-GH₵ {{ sale.discount_amount|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <th>VAT (15%):</th>
                                <td class="text-end">GH₵ {{ sale.tax_amount|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <th><strong>Total:</strong></th>
                                <td class="text-end text-success"><strong>GH₵ {{ sale.total_amount|floatformat:2 }}</strong></td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                {% if sale.customer %}
                <div class="alert alert-info">
                    <i class="fas fa-user"></i>
                    <strong>Customer:</strong> {{ sale.customer.name }} ({{ sale.customer.phone }})
                    {% if sale.customer.available_credit > 0 %}
                    <br><small>Available Credit: GH₵ {{ sale.customer.available_credit|floatformat:2 }}</small>
                    {% endif %}
                </div>
                {% endif %}
                
                <!-- Sale Items -->
                <h6>Sale Items:</h6>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Unit Price</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in sale.items.all %}
                            <tr>
                                <td>{{ item.product.name }}</td>
                                <td class="text-end">{{ item.quantity }}</td>
                                <td class="text-end">GH₵ {{ item.unit_price|floatformat:2 }}</td>
                                <td class="text-end text-success">GH₵ {{ item.total_price|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-credit-card"></i> Payment Details</h5>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label class="form-label">Total Amount</label>
                        <input type="text" class="form-control form-control-lg text-center bg-light" 
                               value="GH₵ {{ sale.total_amount|floatformat:2 }}" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Amount Paid *</label>
                        <input type="number" class="form-control form-control-lg" name="amount_paid" 
                               value="{{ sale.total_amount|floatformat:2 }}" min="0" step="0.01" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Payment Method *</label>
                        <select class="form-select" name="payment_method" id="paymentMethod">
                            <option value="cash" selected>Cash</option>
                            <option value="mobile_money">Mobile Money</option>
                            <option value="card">Card</option>
                            <option value="credit" {% if sale.customer and sale.customer.is_credit_available %}available{% else %}disabled{% endif %}>
                                Credit Sale
                            </option>
                            <option value="bank_transfer">Bank Transfer</option>
                        </select>
                    </div>
                    
                    <div class="mb-3" id="mobileMoneyField" style="display: none;">
                        <label class="form-label">Mobile Money Number</label>
                        <input type="text" class="form-control" name="mobile_money_number" 
                               placeholder="0241234567">
                    </div>
                    
                    <div class="mb-3" id="changeField">
                        <label class="form-label">Change</label>
                        <input type="text" class="form-control bg-light" id="changeAmount" 
                               value="GH₵ 0.00" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="give_change" id="giveChange" checked>
                            <label class="form-check-label" for="giveChange">
                                Calculate change automatically
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-check-circle"></i> Process Payment
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="calculateChange()">
                            <i class="fas fa-calculator"></i> Calculate Change
                        </button>
                    </div>
                </form>
                
                <div class="alert alert-warning mt-3">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Note:</strong> Once processed, stock will be deducted from {{ sale.shop.name }}.
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Show/hide mobile money field
    document.getElementById('paymentMethod').addEventListener('change', function() {
        const mobileMoneyField = document.getElementById('mobileMoneyField');
        mobileMoneyField.style.display = this.value === 'mobile_money' ? 'block' : 'none';
        
        // Auto-calculate change
        calculateChange();
    });
    
    // Calculate change when amount paid changes
    document.querySelector('input[name="amount_paid"]').addEventListener('input', calculateChange);
    
    // Initial calculation
    calculateChange();
});

function calculateChange() {
    const totalAmount = parseFloat({{ sale.total_amount }});
    const amountPaid = parseFloat(document.querySelector('input[name="amount_paid"]').value) || 0;
    const giveChange = document.getElementById('giveChange').checked;
    const paymentMethod = document.getElementById('paymentMethod').value;
    
    let change = 0;
    
    if (giveChange && paymentMethod === 'cash' && amountPaid > totalAmount) {
        change = amountPaid - totalAmount;
    }
    
    document.getElementById('changeAmount').value = 'GH₵ ' + change.toFixed(2);
}
</script>
{% endblock %}