@extends('layout.master')
@section('content')
    <div class="content datatable">
        <div class="p-4 code-to-copy">
            <div class="card shadow-none border">
                <div class="card-header p-4 border-bottom bg-body">
                    <div class="row g-3 justify-content-between align-items-end">
                        <div class="col-12 col-md">
                            <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                Transaction List
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="p-4 code-to-copy">

                        <table class="table table-striped table-sm fs-9 mb-0 data-table">
                            <thead>
                                <tr>
                                    <th class="sort border-top border-translucent ps-3" data-sort="name">#</th>
                                    <th class="sort border-top border-translucent ps-3" data-sort="tran">Transaction
                                        ID</th>
                                    <th class="sort border-top" data-sort="age">Status</th>
                                    <th class="sort border-top border-translucent ps-3" data-sort="amount">Amount
                                    </th>
                                    <th class="sort border-top" data-sort="email">No Of ID</th>

                                    <th class="sort border-top" data-sort="od">Offer Date</th>
                                    <th class="sort border-top" data-sort="email">Free ID</th>
                                    <th class="sort border-top" data-sort="email">Total ID</th>
                                    <th class="sort border-top" data-sort="due">Due Amount</th>
                                    <th class="sort border-top" data-sort="due">Total Amount</th>
                                    <th class="sort border-top" data-sort="tdate">Transaction Date</th>
                                    <th class="sort border-top" data-sort="type">Payment Type</th>

                                </tr>
                            </thead>
                            <tbody class="list">
                                @foreach ($Transaction as $key => $T)
                                    <tr>
                                        <td class="align-middle ps-3 name">{{ $key + 1 }}</td>
                                        <td class="align-middle ps-3 tran">{{ $T['txnid'] }}</td>
                                        <td class="align-middle age">{!! checkStatus($T['status']) !!}</td>
                                        <td class="align-middle ps-3 amount">{{ getCurrency() . $T['amount'] }}</td>
                                        <td class="align-middle ps-3 name">{{ $T['no_of_id'] }}</td>
                                        <td class="align-middle ps-3 od">
                                            {{ $T['offer_date'] != '' ? $T['offer_date'] : '-' }}</td>
                                        <td class="align-middle ps-3 name">{{ $T['free_id'] }}</td>
                                        <td class="align-middle ps-3 name">{{ $T['total_id'] }}</td>
                                        <td class="align-middle ps-3 name">{{ getCurrency() . $T['due_amount'] }}</td>
                                        <td class="align-middle ps-3 name">{{ getCurrency() . $T['total_paid_amount'] }}
                                        </td>
                                        <td class="align-middle ps-3 tdate">
                                            {{ date('d M Y', strtotime($T['created_at'])) }}</td>
                                        <td class="align-middle type">{{ ucfirst(str_replace('_', ' ', $T['type']))  }}</td>

                                    </tr>
                                @endforeach
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection