@extends('layouts.admin') @section('content')

<div class="card mb-3">
    <div class="card-header">
        <div class="row flex-between-end">
            <div class="col-auto align-self-center">
                <h5 class="mb-0" data-anchor="data-anchor">List of deleted payments</h5>
            </div>
        </div>
    </div>
    <div class="card-body pt-0">
        <div id="tableExample2" data-list='{"valueNames":["id", "date", "member_id","name","amount", "method"],"page":10,"pagination":true}'>
            <div class="table-responsive scrollbar">
                <small>
                    <table id="basic-btn" class="table table-sm table-striped table-bordered nowrap">
                        <thead class="bg-200 text-900">
                            <tr>                              
                                <th>ID</th>
                                <th>Member Nat ID</th>
                                <th>Date</th>                              
                                <th>Amount</th>
                                <th># of months</th>
                                <th>Payment Method</th>
                                <th>Deleted By</th>
                                <th>Date and time</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($payments as $payment)
                            <tr>                               
                                <td>{{$payment->id}}</td>
                                <td>{{$payment->member->national_id}}</td>
                                <td>{{$payment->payment_date}}</td>                            
                                <td>{{$payment->amount_paid}}</td>
                                <td>{{$payment->months}}</td>
                                <td>{{$payment->mode->name}}</td>
                                <td>{{$payment->by->name}} {{$payment->by->surname}}</td>
                                <td>{{$payment->created_at}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </small>
            </div>
            <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button>
            </div>
        </div>
    </div>

</div>
@endsection