{% extends 'adminapp/master.html' %}
{% load static %}
{% block content %}

<div class="page-content">
    <div class="container-fluid">

        <!-- Page Title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 fw-semibold">View Payment</h4>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{% url 'index' %}" class="text-muted"><i class="bi bi-house-door-fill me-1"></i>Dashboard</a>
                        </li>
                        <li class="breadcrumb-item active text-primary">View Payment</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="row mb-4">
            <div class="col-md-4">
                <form method="GET">
                    <label for="paymentStatusFilter" class="form-label fw-semibold">Filter by Payment Status:</label>
                    <select name="payment_status" id="paymentStatusFilter" class="form-select rounded shadow-sm" onchange="this.form.submit()">
                        <option value="">All</option>
                        <option value="paid" {% if request.GET.payment_status == 'paid' %}selected{% endif %}>Paid</option>
                        <option value="refunded" {% if request.GET.payment_status == 'refunded' %}selected{% endif %}>Refunded</option>
                    </select>
                </form>
            </div>
        </div>

        <!-- Transaction Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card rounded shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center border-bottom bg-light-subtle">
                        <h5 class="mb-0 fw-semibold"><i class="bi bi-receipt me-2 "></i> Payment List</h5>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table align-middle text-nowrap table-hover table-centered mb-0">
                                <thead class="table-dark  ">
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Customer</th>
                                        <th>Date</th>
                                        <th>Amount</th>
                                        <th>Razorpay Order ID</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for transaction in page_obj %}
                                    <tr>
                                        <td>{{ transaction.order.id }}</td>
                                        <td>
                                            <strong>{{ transaction.user.username }}</strong><br>
                                            <small class="text-muted">{{ transaction.user.email }}</small>
                                        </td>
                                        <td>{{ transaction.created_at|date:"M d, Y H:i" }}</td>
                                        <td><strong>Rs. {{ transaction.total_price }}</strong></td>
                                        <td>{{ transaction.razorpay_order_id }}</td>
                                        <td>
                                            {% if transaction.payment_status == 'paid' %}
                                                <span class="badge bg-success-subtle text-success fw-semibold">Paid</span>
                                            {% elif transaction.payment_status == 'refunded' %}
                                                <span class="badge bg-danger-subtle text-danger fw-semibold">Refunded</span>
                                            {% else %}
                                                <span class="badge bg-warning-subtle text-warning fw-semibold">Pending</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center py-4">No transactions found</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    

                </div>
            </div>
        </div>

    </div>
</div>

{% endblock %}