{% extends "Lipa_mdogo/base_dashboard.html" %}

{% block title %}Payment History | Lipa Mdogo Mdogo{% endblock %}

{% block content %}
<h4 class="mb-4">Payment History</h4>

<!-- Filters -->
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <form class="row g-3">
            <div class="col-md-4">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button class="btn btn-primary w-100">
                    <i class="bi bi-funnel me-1"></i> Filter
                </button>
            </div>
        </form>
    </div>
</div>

<!-- History Table -->
<div class="card shadow-sm">
    <div class="card-body p-0">

        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Item</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Reference</th>
                    </tr>
                </thead>
                <tbody>

                    <!-- Payment Row -->
                    <tr>
                        <td>20 Jan 2026</td>
                        <td>Samsung Galaxy A14</td>
                        <td>KES 2,000</td>
                        <td>
                            <span class="badge bg-success">
                                Successful
                            </span>
                        </td>
                        <td>MPESA12345</td>
                    </tr>

                    <tr>
                        <td>18 Jan 2026</td>
                        <td>LG 43” Smart TV</td>
                        <td>KES 1,500</td>
                        <td>
                            <span class="badge bg-warning text-dark">
                                Pending
                            </span>
                        </td>
                        <td>MPESA12312</td>
                    </tr>

                    <tr>
                        <td>15 Jan 2026</td>
                        <td>Hisense Fridge</td>
                        <td>KES 3,000</td>
                        <td>
                            <span class="badge bg-danger">
                                Failed
                            </span>
                        </td>
                        <td>MPESA12288</td>
                    </tr>

                </tbody>
            </table>
        </div>

    </div>
</div>

<!-- Mobile Friendly Note -->
<p class="text-muted small mt-3">
    Showing recent payment transactions. Contact support for discrepancies.
</p>

{% endblock %}