{% extends 'base.html' %}

{% block title %}Manage Balance - {{ customer.display_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800">
                <i class="bi bi-wallet2 text-primary"></i> Manage Customer Balance
            </h1>
            <p class="text-muted mb-0">{{ customer.display_name }} ({{ customer.customer_id }})</p>
        </div>
        <div class="btn-group">
            <a href="{% url 'customers:customer_detail' customer.customer_id %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Customer
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Balance Management Form -->
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-plus-circle"></i> Add Balance Transaction
                    </h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="{{ form.transaction_type.id_for_label }}" class="form-label">Transaction Type</label>
                            {{ form.transaction_type }}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.amount.id_for_label }}" class="form-label">Amount (KES)</label>
                            {{ form.amount }}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                            {{ form.description }}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.reference_id.id_for_label }}" class="form-label">Reference ID</label>
                            {{ form.reference_id }}
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Process Transaction
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Current Balance Info -->
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-info text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-info-circle"></i> Current Balance
                    </h6>
                </div>
                <div class="card-body text-center">
                    <div class="h2 mb-3 {% if customer.account_balance >= 0 %}text-success{% else %}text-danger{% endif %}">
                        KES {{ customer.account_balance|floatformat:2 }}
                    </div>
                    {% if customer.account_balance >= 0 %}
                        <span class="badge bg-success">Credit Balance</span>
                    {% else %}
                        <span class="badge bg-danger">Debit Balance</span>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Transactions -->
            <div class="card shadow">
                <div class="card-header py-3 bg-secondary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-clock-history"></i> Recent Transactions
                    </h6>
                </div>
                <div class="card-body p-0">
                    {% if balance_history %}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-0">Date</th>
                                        <th class="border-0">Type</th>
                                        <th class="border-0">Amount</th>
                                        <th class="border-0">Balance After</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for transaction in balance_history %}
                                    <tr>
                                        <td class="small">{{ transaction.created_at|date:"M d, Y H:i" }}</td>
                                        <td>
                                            <span class="badge bg-{% if transaction.transaction_type == 'credit' %}success{% elif transaction.transaction_type == 'debit' %}danger{% else %}secondary{% endif %}">
                                                {{ transaction.get_transaction_type_display }}
                                            </span>
                                        </td>
                                        <td class="text-{% if transaction.transaction_type == 'credit' %}success{% else %}danger{% endif %} font-weight-bold">
                                            {% if transaction.transaction_type == 'credit' %}+{% else %}-{% endif %}KES {{ transaction.amount|floatformat:2 }}
                                        </td>
                                        <td class="font-weight-bold">KES {{ transaction.balance_after|floatformat:2 }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-clock text-muted fa-3x mb-3"></i>
                            <p class="text-muted">No transaction history yet</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}