{% extends 'base.html' %}

{% block title %}Resolve Unreconciled 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">
                <h2><i class="bi bi-tools"></i> Resolve Unreconciled Payment</h2>
                <a href="{% url 'payments:unreconciled_payments_list' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to List
                </a>
            </div>

            <div class="row">
                <!-- Payment Details -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Payment Details</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Transaction ID:</strong></td>
                                    <td><code>{{ unreconciled.transaction_id }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Amount:</strong></td>
                                    <td><strong class="text-success">KES {{ unreconciled.amount|floatformat:2 }}</strong></td>
                                </tr>
                                <tr>
                                    <td><strong>Phone Number:</strong></td>
                                    <td><code>{{ unreconciled.phone_number }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Customer Name:</strong></td>
                                    <td>{{ unreconciled.customer_name|default:"Unknown" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Account Reference:</strong></td>
                                    <td><code class="text-danger">{{ unreconciled.account_reference }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Transaction Time:</strong></td>
                                    <td>{{ unreconciled.transaction_time|date:"M j, Y H:i" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Reason:</strong></td>
                                    <td><span class="badge bg-secondary">{{ unreconciled.get_reason_display }}</span></td>
                                </tr>
                                {% if unreconciled.notes %}
                                <tr>
                                    <td><strong>Notes:</strong></td>
                                    <td><small class="text-muted">{{ unreconciled.notes }}</small></td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Resolution Actions -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="bi bi-gear"></i> Resolution Actions</h5>
                        </div>
                        <div class="card-body">
                            <!-- Resolve to Customer -->
                            <form method="post" class="mb-4">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="resolve">
                                
                                <div class="mb-3">
                                    <label class="form-label">
                                        <i class="bi bi-person-check"></i> Assign to Customer
                                    </label>
                                    <select name="customer_id" class="form-select" required>
                                        <option value="">Select a customer...</option>
                                        {% for customer in customers %}
                                        <option value="{{ customer.id }}">
                                            {{ customer.full_name }} ({{ customer.customer_id }})
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">
                                        This will create a payment record for the selected customer and update their account balance.
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Resolution Notes</label>
                                    <textarea name="notes" class="form-control" rows="3" 
                                              placeholder="Add notes about why this payment was assigned to this customer..."></textarea>
                                </div>

                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bi bi-check-circle"></i> Resolve to Customer
                                </button>
                            </form>

                            <hr>

                            <!-- Ignore Payment -->
                            <form method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="ignore">
                                
                                <div class="mb-3">
                                    <label class="form-label">
                                        <i class="bi bi-x-circle"></i> Mark as Ignored
                                    </label>
                                    <textarea name="notes" class="form-control" rows="2" 
                                              placeholder="Reason for ignoring this payment..."></textarea>
                                    <div class="form-text text-muted">
                                        Use this if the payment cannot be resolved or is not valid.
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-outline-secondary w-100">
                                    <i class="bi bi-x-circle"></i> Mark as Ignored
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Potential Matches -->
            {% if potential_matches %}
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0"><i class="bi bi-search"></i> Potential Customer Matches</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Customer ID</th>
                                            <th>Name</th>
                                            <th>Phone</th>
                                            <th>Status</th>
                                            <th>Balance</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for customer in potential_matches %}
                                        <tr>
                                            <td><code>{{ customer.customer_id }}</code></td>
                                            <td>{{ customer.full_name }}</td>
                                            <td><code>{{ customer.phone_number }}</code></td>
                                            <td>
                                                <span class="badge bg-{% if customer.status == 'active' %}success{% elif customer.status == 'suspended' %}warning{% else %}secondary{% endif %}">
                                                    {{ customer.get_status_display }}
                                                </span>
                                            </td>
                                            <td>KES {{ customer.account_balance|floatformat:2 }}</td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-outline-primary" 
                                                        onclick="selectCustomer('{{ customer.id }}', '{{ customer.full_name|escapejs }}', '{{ customer.customer_id|escapejs }}')">
                                                    <i class="bi bi-arrow-up"></i> Select
                                                </button>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function selectCustomer(customerId, customerName, customerCode) {
    const select = document.querySelector('select[name="customer_id"]');
    select.value = customerId;
    
    // Add visual feedback
    const option = select.querySelector(`option[value="${customerId}"]`);
    if (option) {
        option.style.backgroundColor = '#e3f2fd';
        select.focus();
    }
    
    // Scroll to the form
    select.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
{% endblock %}