@extends('layouts.frontendProfile')

@section('profile-content')
    <style>
        td:last-child,
        th:last-child {
            padding-right: 15px !important;
        }

        td:first-child,
        th:first-child {
            padding-left: 15px !important;
        }
    </style>
    <p class="bg-white card-header mb-4 text-dark" style="margin: 0 -15px;"><i
            class="fas fa-money-bill mr-2"></i>รายการธุรกรรมของคุณ</p>
    <div class="table-full-width">
        <div class="table-responsive">
            <table class="table table-striped DataTable" data-order='[[0, "desc"]]'>
                <thead>
                    <th class="text-center">ลำดับ</th>
                    <th class="text-center">ประเภท</th>
                    <th class="text-right">จำนวน</th>
                    {{-- <th class="text-center">สถานะ</th> --}}
                    <th class="text-center">รายละเอียด</th>
                    <th>เวลา</th>
                </thead>
                <tbody>
                    @php $i = 0 @endphp
                    @foreach ($wallet as $key => $item)
                        <tr class="{{ $item->status === 0 ? '' :($item->amount > 0 ? 'table-success' : 'table-danger') }}">
                            <td class="align-middle text-center">{{ ++$i }}</td>
                            <td class="align-middle text-center"><strong
                                    class="text-{{ $item->amount > 0 ? 'success' : 'danger' }}">{{ $item->amount > 0 ? 'ฝากเงิน' : 'ถอนเงิน' }}</strong>
                            </td>
                            <td class="align-middle text-right">{{ number_format($item->amount, 2) }} ฿</td>
                            {{-- <td class="align-middle text-center">
                                <strong class="text-{{ $item->status == 1 ? 'success' : 'danger' }}">{{ $item->status == 1 ? 'สำเร็จ' : ($item->amount < 0 && $item->transaction_id ? 'รอตรวจสอบ' : 'ไม่สำเร็จ') }}</strong>
                            </td> --}}
                            <td class="align-middle small">{{ $item->detail }}</td>
                            <td title="{{ THdatetime($item->created_at) }}" class="small">
                                {{ TimeAgo($item->created_at) }}<br>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $('.DataTable').DataTable({
            dom: `<'row'<'col-sm-12 px-3 col-md-6'l><'col-sm-12 px-3 col-md-6'f>>
                    <'row'<'col-sm-12 table-responsive'tr>>
                    <'row'<'col-sm-12 text-center'i><'col-sm-12 d-flex justify-content-center px-0 mt-2'p>>`,
            language: {
                paginate: {
                    first:      `<i class="fas fa-chevron-double-left"></i>`,
                    last:       `<i class="fas fa-chevron-double-right"></i>`,
                    next:       `<i class="fas fa-chevron-right"></i>`,
                    previous:   `<i class="fas fa-chevron-left"></i>`,
                },
            }
        });
    </script>
@endsection