{% extends 'base.html' %}

{% block title %}Test M-Pesa Payment{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Test M-Pesa Payment</h1>
                <a href="{% url 'payments:dashboard' %}" class="btn btn-outline-secondary">
                    <span>←</span> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Simulate Payment</h6>
                </div>
                <div class="card-body">
                    {% if config.environment != 'sandbox' %}
                        <div class="alert alert-danger">
                            <span>⚠️</span>
                            Payment simulation is only available in sandbox environment.
                        </div>
                    {% else %}
                        <form method="post">
                            {% csrf_token %}
                            
                            <div class="form-group">
                                <label for="{{ form.phone_number.id_for_label }}">{{ form.phone_number.label }}</label>
                                {{ form.phone_number }}
                                {% if form.phone_number.help_text %}
                                    <small class="form-text text-muted">{{ form.phone_number.help_text }}</small>
                                {% endif %}
                                {% if form.phone_number.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.phone_number.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <label for="{{ form.amount.id_for_label }}">{{ form.amount.label }}</label>
                                {{ form.amount }}
                                {% if form.amount.help_text %}
                                    <small class="form-text text-muted">{{ form.amount.help_text }}</small>
                                {% endif %}
                                {% if form.amount.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.amount.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <label for="{{ form.bill_ref_number.id_for_label }}">{{ form.bill_ref_number.label }}</label>
                                {{ form.bill_ref_number }}
                                {% if form.bill_ref_number.help_text %}
                                    <small class="form-text text-muted">{{ form.bill_ref_number.help_text }}</small>
                                {% endif %}
                                {% if form.bill_ref_number.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.bill_ref_number.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-success">
                                    <span>▶</span> Simulate Payment
                                </button>
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-info">Testing Instructions</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><span>ℹ️</span> How to Test</h6>
                        <ol class="mb-0">
                            <li>Make sure you have a borrower registered with the phone number</li>
                            <li>Ensure the borrower has an active loan</li>
                            <li>Enter the phone number and amount</li>
                            <li>Optionally specify a loan number in the reference field</li>
                            <li>Click "Simulate Payment" to trigger the M-Pesa flow</li>
                        </ol>
                    </div>

                    <div class="alert alert-warning">
                        <h6><span>⚠️</span> Test Phone Numbers</h6>
                        <p class="mb-1">Use these test numbers in sandbox:</p>
                        <ul class="mb-0">
                            <li><code>254708374149</code></li>
                            <li><code>254711XXXXXX</code></li>
                            <li><code>254733XXXXXX</code></li>
                        </ul>
                    </div>

                    {% if config %}
                    <div class="alert alert-success">
                        <h6><span>⚙️</span> Current Configuration</h6>
                        <p class="mb-1"><strong>Environment:</strong> {{ config.get_environment_display }}</p>
                        <p class="mb-1"><strong>Short Code:</strong> {{ config.business_short_code }}</p>
                        <p class="mb-0"><strong>Status:</strong> 
                            {% if config.is_active %}
                                <span class="text-success">Active</span>
                            {% else %}
                                <span class="text-danger">Inactive</span>
                            {% endif %}
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}