@extends('layouts.user.account')

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

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

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

		<x-user.centered-content>
			<div class="mb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ $paymentData['title'] }}
				</h4>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.status') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->status_label }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.payment-method') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->method_label }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.amount') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->formatted_amount }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.date') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->formatted_date }}
					</span>
				</div>
			</div>
			
			<div class="mb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ __('payment.order-details') }}
				</h4>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.type') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->type_label }}
					</span>
				</div>
				@if($paymentData->orderDetails)
					@foreach($paymentData->orderDetails as $orderDetail)
						<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
							<span class="flex-shrink-0 mr-4">
								{{ $orderDetail['label'] }}
							</span>
							<span class="break-all text-right overflow-hidden">
								{{ $orderDetail['value'] }}
							</span>
						</div>
					@endforeach
				@endif
			</div>
			
			<div class="mb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ __('labels.additional-information') }}
				</h4>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.quantity') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->quantity }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						ID
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->id }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						UUID
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->uuid }}
					</span>
				</div>
				<div class="text-par-s flex justify-between overflow-hidden py-2 px-4 even:bg-fill-qt">
					<span class="flex-shrink-0 mr-4">
						{{ __('table.reference') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $paymentData->reference_id }}
					</span>
				</div>
			</div>

			<div class="block">
				<a href="{{ route('user.payments.index') }}" class="text-par-s text-brand-900 underline">&larr; Return back to payment history</a>
			</div>
		</x-user.centered-content>
	</x-page-content>
@endsection