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

{% block title %}Payments - Billing{% 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">Payments</h1>
                <a href="{% url 'billing:bill_list' %}" class="btn btn-outline-primary">
                    <i class="fas fa-file-invoice"></i> View Bills
                </a>
            </div>

            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Total Payments</h6>
                                    <h4 class="mb-0">{{ stats.total_payments }}</h4>
                                </div>
                                <i class="fas fa-credit-card fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Total Amount</h6>
                                    <h4 class="mb-0">${{ stats.total_amount|floatformat:2 }}</h4>
                                </div>
                                <i class="fas fa-dollar-sign fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Total Refunds</h6>
                                    <h4 class="mb-0">${{ stats.total_refunds|floatformat:2 }}</h4>
                                </div>
                                <i class="fas fa-undo fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Net Amount</h6>
                                    <h4 class="mb-0">${{ stats.net_amount|floatformat:2 }}</h4>
                                </div>
                                <i class="fas fa-chart-line fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-2">
                            <label for="payment_method" class="form-label">Payment Method</label>
                            <select name="payment_method" id="payment_method" class="form-select">
                                <option value="">All Methods</option>
                                <option value="CASH" {% if payment_method == 'CASH' %}selected{% endif %}>Cash</option>
                                <option value="CHECK" {% if payment_method == 'CHECK' %}selected{% endif %}>Check</option>
                                <option value="CREDIT_CARD" {% if payment_method == 'CREDIT_CARD' %}selected{% endif %}>Credit Card</option>
                                <option value="DEBIT_CARD" {% if payment_method == 'DEBIT_CARD' %}selected{% endif %}>Debit Card</option>
                                <option value="BANK_TRANSFER" {% if payment_method == 'BANK_TRANSFER' %}selected{% endif %}>Bank Transfer</option>
                                <option value="ACH" {% if payment_method == 'ACH' %}selected{% endif %}>ACH Transfer</option>
                                <option value="WIRE" {% if payment_method == 'WIRE' %}selected{% endif %}>Wire Transfer</option>
                                <option value="MONEY_ORDER" {% if payment_method == 'MONEY_ORDER' %}selected{% endif %}>Money Order</option>
                                <option value="INSURANCE" {% if payment_method == 'INSURANCE' %}selected{% endif %}>Insurance Payment</option>
                                <option value="ADJUSTMENT" {% if payment_method == 'ADJUSTMENT' %}selected{% endif %}>Adjustment</option>
                                <option value="WRITE_OFF" {% if payment_method == 'WRITE_OFF' %}selected{% endif %}>Write Off</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="payment_source" class="form-label">Payment Source</label>
                            <select name="payment_source" id="payment_source" class="form-select">
                                <option value="">All Sources</option>
                                <option value="PATIENT" {% if payment_source == 'PATIENT' %}selected{% endif %}>Patient</option>
                                <option value="INSURANCE" {% if payment_source == 'INSURANCE' %}selected{% endif %}>Insurance</option>
                                <option value="GUARANTOR" {% if payment_source == 'GUARANTOR' %}selected{% endif %}>Guarantor</option>
                                <option value="GOVERNMENT" {% if payment_source == 'GOVERNMENT' %}selected{% endif %}>Government</option>
                                <option value="CHARITY" {% if payment_source == 'CHARITY' %}selected{% endif %}>Charity</option>
                                <option value="OTHER" {% if payment_source == 'OTHER' %}selected{% endif %}>Other</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-select">
                                <option value="">All Statuses</option>
                                <option value="PENDING" {% if status == 'PENDING' %}selected{% endif %}>Pending</option>
                                <option value="PROCESSED" {% if status == 'PROCESSED' %}selected{% endif %}>Processed</option>
                                <option value="CLEARED" {% if status == 'CLEARED' %}selected{% endif %}>Cleared</option>
                                <option value="BOUNCED" {% if status == 'BOUNCED' %}selected{% endif %}>Bounced</option>
                                <option value="REVERSED" {% if status == 'REVERSED' %}selected{% endif %}>Reversed</option>
                                <option value="REFUNDED" {% if status == 'REFUNDED' %}selected{% endif %}>Refunded</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">Date From</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ date_from }}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_to" class="form-label">Date To</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ date_to }}">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">&nbsp;</label>
                            <button type="submit" class="btn btn-primary d-block">Filter</button>
                        </div>
                    </form>
                    <div class="row mt-3">
                        <div class="col-md-11">
                            <input type="text" name="search" id="search" class="form-control" 
                                   placeholder="Payment number, bill number, patient name..." value="{{ search }}">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-outline-secondary d-block" onclick="clearFilters()">
                                <i class="fas fa-times"></i> Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payments Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Payment Records</h5>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-secondary" onclick="refreshPayments()">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Payment Number</th>
                                    <th>Bill Number</th>
                                    <th>Patient</th>
                                    <th>Payment Date</th>
                                    <th>Amount</th>
                                    <th>Method</th>
                                    <th>Source</th>
                                    <th>Status</th>
                                    <th>Received By</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in payments %}
                                <tr>
                                    <td>
                                        <strong>{{ payment.payment_number }}</strong>
                                        {% if payment.check_number %}
                                            <br><small class="text-muted">Check: {{ payment.check_number }}</small>
                                        {% endif %}
                                        {% if payment.authorization_code %}
                                            <br><small class="text-muted">Auth: {{ payment.authorization_code }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{% url 'billing:bill_detail' payment.medical_bill.bill_id %}" class="text-decoration-none">
                                            {{ payment.medical_bill.bill_number }}
                                        </a>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ payment.medical_bill.patient.get_full_name }}</strong><br>
                                            <small class="text-muted">MRN: {{ payment.medical_bill.patient.mrn }}</small>
                                        </div>
                                    </td>
                                    <td>{{ payment.payment_date|date:"M d, Y" }}</td>
                                    <td>
                                        <strong class="text-success">${{ payment.payment_amount|floatformat:2 }}</strong>
                                        {% if payment.refund_amount > 0 %}
                                            <br><small class="text-warning">Refund: ${{ payment.refund_amount|floatformat:2 }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ payment.get_payment_method_display }}</span>
                                        {% if payment.card_type and payment.card_last_four %}
                                            <br><small class="text-muted">{{ payment.card_type }} ****{{ payment.card_last_four }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ payment.get_payment_source_display }}</span>
                                        {% if payment.insurance_claim %}
                                            <br><small class="text-muted">Claim: {{ payment.insurance_claim.claim_number }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payment.status == 'PENDING' %}
                                            <span class="badge bg-warning">Pending</span>
                                        {% elif payment.status == 'PROCESSED' %}
                                            <span class="badge bg-success">Processed</span>
                                        {% elif payment.status == 'CLEARED' %}
                                            <span class="badge bg-success">Cleared</span>
                                        {% elif payment.status == 'BOUNCED' %}
                                            <span class="badge bg-danger">Bounced</span>
                                        {% elif payment.status == 'REVERSED' %}
                                            <span class="badge bg-warning">Reversed</span>
                                        {% elif payment.status == 'REFUNDED' %}
                                            <span class="badge bg-info">Refunded</span>
                                        {% endif %}
                                        {% if payment.deposit_date %}
                                            <br><small class="text-muted">Deposited: {{ payment.deposit_date|date:"M d" }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ payment.received_by.get_full_name|default:"System" }}</strong>
                                            {% if payment.processed_by and payment.processed_by != payment.received_by %}
                                                <br><small class="text-muted">Processed by: {{ payment.processed_by.get_full_name }}</small>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td>
                                        {% if payment.bank_name %}
                                            <small class="text-muted">Bank: {{ payment.bank_name }}</small><br>
                                        {% endif %}
                                        {% if payment.transaction_id %}
                                            <small class="text-muted">TXN: {{ payment.transaction_id|truncatechars:15 }}</small><br>
                                        {% endif %}
                                        {% if payment.eob_number %}
                                            <small class="text-muted">EOB: {{ payment.eob_number }}</small><br>
                                        {% endif %}
                                        {% if payment.notes %}
                                            <small class="text-muted">{{ payment.notes|truncatechars:30 }}</small>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="10" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-credit-card fa-3x mb-3"></i>
                                            <p>No payments found.</p>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Payments pagination" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if request.GET.payment_method %}&payment_method={{ request.GET.payment_method }}{% endif %}{% if request.GET.payment_source %}&payment_source={{ request.GET.payment_source }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.payment_method %}&payment_method={{ request.GET.payment_method }}{% endif %}{% if request.GET.payment_source %}&payment_source={{ request.GET.payment_source }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Previous</a>
                        </li>
                    {% endif %}

                    <li class="page-item active">
                        <span class="page-link">
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                        </span>
                    </li>

                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.payment_method %}&payment_method={{ request.GET.payment_method }}{% endif %}{% if request.GET.payment_source %}&payment_source={{ request.GET.payment_source }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.payment_method %}&payment_method={{ request.GET.payment_method }}{% endif %}{% if request.GET.payment_source %}&payment_source={{ request.GET.payment_source }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Last</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>

<script>
function refreshPayments() {
    location.reload();
}

function clearFilters() {
    window.location.href = '{% url "billing:payment_list" %}';
}
</script>
{% endblock %}