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

{% block title %}Unconfirmed Payment Details{% 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">Unconfirmed Payment Details</h1>
                <a href="{% url 'payments:unconfirmed_payments' %}" class="btn btn-outline-secondary">
                    <span>←</span> Back to List
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Payment Information -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Payment Information</h6>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-4">Amount:</dt>
                        <dd class="col-sm-8">
                            <h5 class="mb-0 text-success">KES {{ transaction.amount|floatformat:2|intcomma }}</h5>
                        </dd>

                        <dt class="col-sm-4">Phone Number:</dt>
                        <dd class="col-sm-8">{{ unconfirmed.payment_phone|default:"N/A" }}</dd>

                        <dt class="col-sm-4">ID Number:</dt>
                        <dd class="col-sm-8">{{ unconfirmed.payment_id_number|default:"N/A" }}</dd>

                        <dt class="col-sm-4">Transaction ID:</dt>
                        <dd class="col-sm-8">
                            <code>{{ transaction.trans_id|default:"N/A" }}</code>
                        </dd>

                        <dt class="col-sm-4">Status:</dt>
                        <dd class="col-sm-8">
                            <span class="badge badge-{% if unconfirmed.status == 'pending' %}warning{% elif unconfirmed.status == 'approved' %}success{% elif unconfirmed.status == 'rejected' %}danger{% else %}info{% endif %}">
                                {{ unconfirmed.get_status_display }}
                            </span>
                        </dd>

                        <dt class="col-sm-4">Match Type:</dt>
                        <dd class="col-sm-8">
                            <span class="badge badge-info">{{ unconfirmed.get_match_type_display }}</span>
                        </dd>

                        <dt class="col-sm-4">Created:</dt>
                        <dd class="col-sm-8">{{ unconfirmed.created_at|date:"M d, Y H:i" }}</dd>

                        {% if unconfirmed.approved_by %}
                        <dt class="col-sm-4">Approved By:</dt>
                        <dd class="col-sm-8">{{ unconfirmed.approved_by.get_full_name }} on {{ unconfirmed.approved_at|date:"M d, Y H:i" }}</dd>
                        {% endif %}

                        {% if unconfirmed.rejection_reason %}
                        <dt class="col-sm-4">Rejection Reason:</dt>
                        <dd class="col-sm-8">{{ unconfirmed.rejection_reason }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Suggested Borrower -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Suggested Borrower</h6>
                </div>
                <div class="card-body">
                    {% if unconfirmed.suggested_borrower %}
                        <dl class="row">
                            <dt class="col-sm-4">Name:</dt>
                            <dd class="col-sm-8">
                                <a href="{% url 'users:client_detail' unconfirmed.suggested_borrower.id %}">
                                    {{ unconfirmed.suggested_borrower.get_full_name }}
                                </a>
                            </dd>

                            <dt class="col-sm-4">Phone:</dt>
                            <dd class="col-sm-8">{{ unconfirmed.suggested_borrower.phone_number|default:"N/A" }}</dd>

                            <dt class="col-sm-4">ID Number:</dt>
                            <dd class="col-sm-8">{{ unconfirmed.suggested_borrower.id_number|default:"N/A" }}</dd>

                            <dt class="col-sm-4">Email:</dt>
                            <dd class="col-sm-8">{{ unconfirmed.suggested_borrower.email|default:"N/A" }}</dd>
                        </dl>
                    {% else %}
                        <p class="text-muted">No suggested borrower found.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Transaction Details -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Transaction Details</h6>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-4">Business Short Code:</dt>
                        <dd class="col-sm-8">{{ transaction.business_short_code|default:"N/A" }}</dd>

                        <dt class="col-sm-4">Transaction Time:</dt>
                        <dd class="col-sm-8">{{ transaction.trans_time|default:"N/A" }}</dd>

                        {% if transaction.processing_notes %}
                        <dt class="col-sm-4">Processing Notes:</dt>
                        <dd class="col-sm-8">
                            <pre class="bg-light p-3 rounded">{{ transaction.processing_notes }}</pre>
                        </dd>
                        {% endif %}

                        {% if unconfirmed.notes %}
                        <dt class="col-sm-4">System Notes:</dt>
                        <dd class="col-sm-8">
                            <pre class="bg-light p-3 rounded">{{ unconfirmed.notes }}</pre>
                        </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>

        <!-- Actions Panel -->
        <div class="col-lg-4">
            {% if unconfirmed.status == 'pending' %}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">Approve Payment</h6>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'payments:approve_unconfirmed_payment' unconfirmed.id %}">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="admin_notes">Admin Notes (Optional):</label>
                            <textarea name="admin_notes" id="admin_notes" class="form-control" rows="3" placeholder="Add any notes about this approval..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-success btn-block" onclick="return confirm('Are you sure you want to approve this payment?')">
                            <span>✓</span> Approve Payment
                        </button>
                    </form>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-danger text-white">
                    <h6 class="m-0 font-weight-bold">Reject Payment</h6>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'payments:reject_unconfirmed_payment' unconfirmed.id %}">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="rejection_reason">Rejection Reason <span class="text-danger">*</span>:</label>
                            <textarea name="rejection_reason" id="rejection_reason" class="form-control" rows="3" required placeholder="Please provide a reason for rejection..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-danger btn-block" onclick="return confirm('Are you sure you want to reject this payment?')">
                            <span>✕</span> Reject Payment
                        </button>
                    </form>
                </div>
            </div>
            {% else %}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold">Payment Status</h6>
                </div>
                <div class="card-body">
                    <p class="mb-0">
                        This payment has been 
                        {% if unconfirmed.status == 'approved' %}
                            <span class="badge badge-success">Approved</span>
                        {% elif unconfirmed.status == 'rejected' %}
                            <span class="badge badge-danger">Rejected</span>
                        {% else %}
                            <span class="badge badge-info">Processed</span>
                        {% endif %}
                    </p>
                    {% if unconfirmed.admin_notes %}
                    <hr>
                    <strong>Admin Notes:</strong>
                    <p class="text-muted">{{ unconfirmed.admin_notes }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
