@extends('layouts.user.app')

@push('style')
    <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@endpush

@section('content')
<div class="col-12 mt-4 mb-4">
    <div class="mb-3">
        <h4 class="pt-3 mb-1">{{$cardTitle}}</h4>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-end align-items-center inner-shadow">
            <div class="d-flex no-wrap">
                <a href="{{route('user.transactions.index')}}?type=all" class="btn btn-sm me-2 rounded-pill btn-info waves-effect waves-light"><span style="@if(request('type') == 'all') text-decoration:underline; @endif">All</span></a>
                <a href="{{route('user.transactions.index')}}?type=deposit" class="btn btn-sm me-2 rounded-pill btn-success waves-effect waves-light"><span style="@if(request('type') == 'deposit') text-decoration:underline; @endif">Deposit</span></a>
                <a href="{{route('user.transactions.index')}}?type=withdraw" class="btn btn-sm me-2 rounded-pill btn-danger waves-effect waves-light"><span style="@if(request('type') == 'withdraw') text-decoration:underline; @endif">Withdraw</span></a>
                <a href="{{route('user.transactions.index')}}?type=pending" class="btn btn-sm me-2 rounded-pill btn-warning waves-effect waves-light"><span style="@if(request('type') == 'pending') text-decoration:underline; @endif">Pending</span></a>
                <a href="{{route('user.transactions.index')}}?type=canceled" class="btn btn-sm me-2 rounded-pill btn-secondary waves-effect waves-light"><span style="@if(request('type') == 'canceled') text-decoration:underline; @endif">Canceled</span></a>
                <a href="{{route('user.transactions.index')}}?type=transfer" class="btn btn-sm rounded-pill btn-primary waves-effect waves-light"><span style="@if(request('type') == 'transfer') text-decoration:underline; @endif">Transfers</span></a>
            </div>
        </div>
        <div class="card-body pt-3">
            <table class="table table-borderless border-top">
                <thead class="border-bottom">
                  <tr class="d-flex">
                    <th class="ps-0 col-2">Type</th>
                    <th class="ps-0 col-2">Status</th>
                    <th class="ps-0 col-2">Transaction</th>
                    <th class="ps-0 col-2">Account <span class="text-muted">(From)</span></th>
                    <th class="ps-0 col-2">Account <span class="text-muted">(To)</span></th>
                    <th class="ps-0 col-2 text-end">Amount</th>
                  </tr>
                </thead>
            </table>
            <ul class="p-0 m-0">
                @forelse ($transactions as $transaction)
                @include('User.transactions.item', ['transaction' => $transaction])
                @empty
                <li class="d-flex mb-3 pb-1 align-items-center">
                    No transactions yet
                </li>
                @endforelse
            </ul>
            {{$transactions->withQueryString()->links('layouts.components.pagination')}}
        </div>
    </div>
</div>
@endsection

@push('script')


@endpush