@extends('customer.layout')

@section('title','Payments')

@section('content')
<h3 class="fw-bold mb-4">Payments</h3>

<div class="row g-4 mb-4">

    <!-- Wallet Balance -->
    <div class="col-md-4">
        <div class="card shadow-sm p-4">
            <h6 class="text-muted">Wallet Balance</h6>
            <h3 class="fw-bold text-success">LKR 0.00</h3>
            <small class="text-muted">Refunds & credits</small>
        </div>
    </div>

    <!-- Total Paid -->
    <div class="col-md-4">
        <div class="card shadow-sm p-4">
            <h6 class="text-muted">Total Paid</h6>
            <h3 class="fw-bold">LKR 0.00</h3>
            <small class="text-muted">All completed payments</small>
        </div>
    </div>

    <!-- Pending -->
    <div class="col-md-4">
        <div class="card shadow-sm p-4">
            <h6 class="text-muted">Pending Payments</h6>
            <h3 class="fw-bold text-warning">LKR 0.00</h3>
            <small class="text-muted">COD / awaiting settlement</small>
        </div>
    </div>

</div>

<!-- Payment History -->
<div class="card shadow-sm">
    <div class="card-body">
        <h6 class="fw-bold mb-3">Payment History</h6>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Order</th>
                        <th>Method</th>
                        <th>Status</th>
                        <th class="text-end">Amount</th>
                    </tr>
                </thead>
                <tbody>

                    {{-- Sample static rows --}}
                    <tr>
                        <td>—</td>
                        <td>#—</td>
                        <td>COD</td>
                        <td>
                            <span class="badge bg-warning">Pending</span>
                        </td>
                        <td class="text-end">LKR 0.00</td>
                    </tr>

                    <tr>
                        <td>—</td>
                        <td>#—</td>
                        <td>Card</td>
                        <td>
                            <span class="badge bg-success">Paid</span>
                        </td>
                        <td class="text-end">LKR 0.00</td>
                    </tr>

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

        <div class="text-center text-muted py-3">
            No payment records yet
        </div>

    </div>
</div>
@endsection