<%- include('includes/header',  {username: admin[0].name,email: admin[0].email } ) %>

    <div class="body-wrapper">
        <div class="container-fluid">
            <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
                <div class="card-body px-4 py-3">
                    <div class="row align-items-center">
                        <div class="col-md-8 col-sm-7">
                            <h4 class="fw-semibold mb-1">Total Payment</h4>

                        </div>


                    </div>

                </div>
            </div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-4">

    <!-- Successful Payment -->
    <a href="/successfulpayment" class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-success-subtle p-3 rounded me-3">
                <i class="fas fa-check fa-lg text-success"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"> <%= currencySymbol %> <%= totals.success.toLocaleString() %>  <%= currency %></div>
                <div class="small text-muted">Successful Payment</div>
            </div>
            <i class="fas fa-chevron-right text-muted ms-3"></i>
        </div>
    </a>

    <!-- Pending Payment -->
    <a href="/pendingpayment" class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-warning-subtle p-3 rounded me-3">
                <i class="fas fa-spinner fa-lg text-warning"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"><%= currencySymbol %> <%= totals.pending.toLocaleString() %> <%= currency %></div>
                <div class="small text-muted">Initiated Payment</div>
            </div>
            <i class="fas fa-chevron-right text-muted ms-3"></i>
        </div>
    </a>

    <!-- Rejected Payment -->
    <a href="/rejectedpayment" class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-danger-subtle p-3 rounded me-3">
                <i class="fas fa-ban fa-lg text-danger"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"><%= currencySymbol %> <%= totals.failed.toLocaleString() %> <%= currency %></div>
                <div class="small text-muted">Failed Payment</div>
            </div>
            <i class="fas fa-chevron-right text-muted ms-3"></i>
        </div>
    </a>

    <!-- Initiated Payment -->
    <a href="/allpayment" class="card shadow-sm rounded-3 p-3 flex-fill text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-primary-subtle p-3 rounded me-3">
                <i class="fas fa-file-invoice-dollar fa-lg text-primary"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"><%= currencySymbol %> <%= totals.grandTotal.toLocaleString() %> <%= currency %></div>
                <div class="small text-muted">Total Payment</div>
            </div>
            <i class="fas fa-chevron-right text-muted ms-3"></i>
        </div>
    </a>

</div>


            <div class="datatables">


                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped table-bordered text-nowrap align-middle">
                                <thead>
                                    <tr>
                                        <th>Method</th>
                                        <th>Transaction ID</th>
                                        <th>Date</th>
                                        <th>User</th>
                                        <th>Amount</th>
                                        <th>Total Amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                           
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


            </div>



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

    <%- include('includes/allscripts') %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="/js/view/allpayment.js"></script>