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

{% block title %}Payment Details - {{ payment.payment_id }}{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-money-bill-wave"></i> Payment Details
            {% if payment.payment_method == 'mpesa' and payment.mpesa_receipt_number %}
                - {{ payment.mpesa_receipt_number }}
            {% elif payment.payment_method == 'cash' and payment.cash_receipt_number %}
                - {{ payment.cash_receipt_number }}
            {% else %}
                - {{ payment.payment_id }}
            {% endif %}
        </h1>
        <div>
            {% if payment.status != 'completed' %}
                <a href="{% url 'payments:payment_edit' payment.id %}" class="btn btn-warning btn-sm">
                    <i class="fas fa-edit"></i> Edit Payment
                </a>
            {% endif %}
            <a href="{% url 'payments:payment_list' %}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Payments
            </a>
        </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">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Payment ID:</strong></td>
                                    <td>{{ payment.payment_id }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Amount:</strong></td>
                                    <td class="h5 text-success">KES {{ payment.amount }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Payment Method:</strong></td>
                                    <td>
                                        <span class="badge 
                                            {% if payment.payment_method == 'mpesa' %}bg-success
                                            {% elif payment.payment_method == 'cash' %}bg-info
                                            {% elif payment.payment_method == 'bank_transfer' %}bg-warning
                                            {% else %}bg-secondary{% endif %}">
                                            {{ payment.get_payment_method_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge 
                                            {% if payment.status == 'completed' %}bg-success
                                            {% elif payment.status == 'pending' %}bg-warning
                                            {% else %}bg-danger{% endif %}">
                                            {{ payment.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Date Created:</strong></td>
                                    <td>{{ payment.created_at|date:"M d, Y H:i" }}</td>
                                </tr>
                                {% if payment.processed_at %}
                                <tr>
                                    <td><strong>Date Processed:</strong></td>
                                    <td>{{ payment.processed_at|date:"M d, Y H:i" }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                {% if payment.mpesa_reference %}
                                <tr>
                                    <td><strong>M-Pesa Reference:</strong></td>
                                    <td>{{ payment.mpesa_reference }}</td>
                                </tr>
                                {% endif %}
                                {% if payment.bank_reference %}
                                <tr>
                                    <td><strong>Bank Reference:</strong></td>
                                    <td>{{ payment.bank_reference }}</td>
                                </tr>
                                {% endif %}
                                {% if payment.cash_receipt_number %}
                                <tr>
                                    <td><strong>Cash Receipt Number:</strong></td>
                                    <td>{{ payment.cash_receipt_number }}</td>
                                </tr>
                                {% endif %}
                                {% if payment.cash_received_by %}
                                <tr>
                                    <td><strong>Cash Received By:</strong></td>
                                    <td>{{ payment.cash_received_by.get_full_name|default:payment.cash_received_by.username }}</td>
                                </tr>
                                {% endif %}
                                {% if payment.invoice %}
                                <tr>
                                    <td><strong>Related Invoice:</strong></td>
                                    <td>
                                        <a href="{% url 'billing:invoice_detail' payment.invoice.id %}">
                                            {{ payment.invoice.invoice_number }}
                                        </a>
                                    </td>
                                </tr>
                                {% endif %}
                                {% if payment.notes %}
                                <tr>
                                    <td><strong>Notes:</strong></td>
                                    <td>{{ payment.notes }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer Information -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Customer Information</h6>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        {% if payment.customer.profile_picture %}
                            <img src="{{ payment.customer.profile_picture.url }}" class="rounded-circle" width="80" height="80">
                        {% else %}
                            <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px; font-size: 2rem;">
                                {{ payment.customer.initials }}
                            </div>
                        {% endif %}
                    </div>
                    <h5 class="text-center">{{ payment.customer.full_name }}</h5>
                    <p class="text-center text-muted">{{ payment.customer.customer_id }}</p>

                    <table class="table table-borderless table-sm">
                        <tr>
                            <td><strong>Email:</strong></td>
                            <td><a href="mailto:{{ payment.customer.email }}">{{ payment.customer.email }}</a></td>
                        </tr>
                        <tr>
                            <td><strong>Phone:</strong></td>
                            <td><a href="tel:{{ payment.customer.phone }}">{{ payment.customer.phone }}</a></td>
                        </tr>
                        <tr>
                            <td><strong>Package:</strong></td>
                            <td>{{ payment.customer.package.name|default:"No package" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                <span class="badge 
                                    {% if payment.customer.status == 'active' %}bg-success
                                    {% elif payment.customer.status == 'suspended' %}bg-warning
                                    {% else %}bg-danger{% endif %}">
                                    {{ payment.customer.get_status_display }}
                                </span>
                            </td>
                        </tr>
                    </table>

                    <div class="text-center">
                        <a href="{% url 'customers:customer_detail' payment.customer.id %}" class="btn btn-primary btn-sm">
                            <i class="fas fa-user"></i> View Customer
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Actions -->
    {% if payment.status == 'pending' %}
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Payment Actions</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        This payment is still pending. You can mark it as completed or failed.
                    </div>
                    <form method="post" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="complete">
                        <button type="submit" class="btn btn-success" onclick="return confirm('Are you sure you want to mark this payment as completed?')">
                            <i class="fas fa-check"></i> Mark as Completed
                        </button>
                    </form>
                    <form method="post" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="fail">
                        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to mark this payment as failed?')">
                            <i class="fas fa-times"></i> Mark as Failed
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}