@extends('layouts.user.account')

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

@section('page_content')
    <x-page-content pageTitle="{{ __('credit.logs-title') }}">
        <x-slot:pageCaption>
       		{{ __('credit.logs-desc') }}
        </x-slot:pageCaption>
		<x-slot:pageTabs>
            @include('user.credit.parts.tabs')
        </x-slot:pageTabs>
		<div class="block">
			<x-table.table>
				<x-table.thead>
					<x-table.th>
						{{ __('table.credits-amount') }}
					</x-table.th>
					<x-table.th>
						{{ __('table.service-type') }}
					</x-table.th>
					<x-table.th>
						{{ __('table.date') }}
					</x-table.th>
				</x-table.thead>
				<x-table.tbody>
					@unless($usageLogs->isEmpty())
						@foreach ($usageLogs as $logItem)
							<x-table.tr>
								<x-table.td>
									{{ $logItem->amount }}
								</x-table.td>
								<x-table.td>
									{{ __('labels.additional-services') }}
                                </x-table.td>
                                <x-table.td>
                                    {{ $logItem->created_at }}
                                </x-table.td>
							</x-table.tr>
						@endforeach
					@else
                        <x-table.tr>
                            <x-table.td colspan="2" :bordered="false">
                                <x-table.placeholder message="{{ __('payment.no-credit-history') }}"></x-table.placeholder>
                            </x-table.td>
                        </x-table.tr>
                    @endif
				</x-table.tbody>
			</x-table.table>

			@unless($usageLogs->isEmpty())
				<div class="mt-6">
					{{ $usageLogs->withQueryString()->links('pagination.tailwind') }}
				</div>
			@endif
		</div>
    </x-page-content>
@endsection