@extends('layouts.user.account')

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

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

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

		<x-user.centered-content>
			<div class="mb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ __('wallet.cashout-request-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.status') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $cashoutData->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">
						{{ $cashoutData->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">
						{{ $cashoutData->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.fee') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $cashoutData->fee_percentage }}%
					</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">
						{{ $cashoutData->formatted_request_date }}
					</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.completed-at') }}
					</span>
					<span class="break-all text-right overflow-hidden">
						{{ $cashoutData->formatted_completed_date }}
					</span>
				</div>
			</div>
			<div class="mb-6 border-b pb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ __('wallet.form.payment-details') }}
				</h4>
				<div class="text-par-s">
					<span class="break-all text-right overflow-hidden">
						{!! nl2br($cashoutData->details) !!}
					</span>
				</div>
			</div>
			<div class="mb-6">
				<h4 class="text-par-s font-semibold mb-2">
					{{ __('wallet.form.message') }}
				</h4>
				<div class="text-par-s">
					<span class="break-all text-right overflow-hidden">
						{!! nl2br($cashoutData->message) !!}
					</span>
				</div>
			</div>
			@if($cashoutData->admin_comment)
				<div class="border-t pt-6 mb-6">
					<h4 class="text-par-s font-semibold mb-2">
						{{ __('labels.reviewer-comment') }}
					</h4>
					<div class="text-par-s">
						<span class="break-all text-right overflow-hidden">
							{!! nl2br($cashoutData->admin_comment) !!}
						</span>
					</div>
				</div>
			@endif

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