@extends('layouts.user.account')

@section('page_title', __('labels.wallet'))

@section('page_content')
	<x-page-content pageTitle="{{ __('wallet.history-title') }}">
		<x-slot:pageCaption>
            {{ __('wallet.history-desc') }}
        </x-slot:pageCaption>

		<x-slot:pageTabs>
            @include('user.wallet.parts.tabs')
        </x-slot:pageTabs>

		<div class="block">
			<x-table.table>
                <x-table.thead>
                    <x-table.th>
                        {{ __('table.amount') }}
                    </x-table.th>
                    <x-table.th>
                        {{ __('table.payment-method') }}
                    </x-table.th>
                    <x-table.th>
                        {{ __('table.fee') }}
                    </x-table.th>
                    <x-table.th>
                        {{ __('table.status') }}
                    </x-table.th>
                    <x-table.th>
                        {{ __('table.date') }}
                    </x-table.th>
					<x-table.th>
                        {{ __('table.completed-at') }}
                    </x-table.th>
                    <x-table.th>
                        <div class="text-right">
                            {{ __('labels.actions') }}
                        </div>
                    </x-table.th>
                </x-table.thead>
                <x-table.tbody>
                    @unless($cashoutHistory->isEmpty())
                        @foreach ($cashoutHistory as $item)
                            <x-table.tr>
                                <x-table.td>
                                    {{ $item->formatted_amount }}
                                </x-table.td>
                                
                                <x-table.td>
                                    {{ $item->method_label }}
                                </x-table.td>
                                <x-table.td>
									{{ $item->fee_percentage }} %
                                </x-table.td>
								<x-table.td>
                                    <span class="status-badge status-{{ $item->status }}">
                                        {{ $item->status_label }}
                                    </span>
                                </x-table.td>
								<x-table.td>
                                    {{ $item->formatted_request_date }}
                                </x-table.td>
								<x-table.td>
                                    {{ $item->formatted_completed_date }}
                                </x-table.td>
                                <x-table.td>
                                    <div class="flex justify-end">
                                        <x-forms.action tag="a" href="{{ route('user.wallet.cashout-request-show', $item->id) }}">
                                            {{ __('labels.show') }}
                                        </x-forms.action>
                                    </div>
                                </x-table.td>
                            </x-table.tr>
                        @endforeach
                    @else
                        <x-table.tr>
                            <x-table.td colspan="7">
                                <x-table.placeholder message="{{ __('payment.no-cashout-history') }}"></x-table.placeholder>
                            </x-table.td>
                        </x-table.tr>
                    @endif
                </x-table.tbody>
            </x-table.table>
			
			@unless($cashoutHistory->isEmpty())
				<div class="mt-6">
					{{ $cashoutHistory->withQueryString()->links('pagination.tailwind') }}
				</div>
			@endif
		</div>
	</x-page-content>
@endsection