@php
	$subtype = '';
@endphp
@if(!empty($transaction_sub_type))
	@php
		$subtype = '?sub_type='.$transaction_sub_type;
	@endphp
@endif

@if(!empty($transactions))
	<div class="table-responsive" style="max-height: 400px; overflow-y: auto; border: 1px solid #d1d1d1;">
		<table class="table" style="margin: 0; border-collapse: collapse; width: 100%; font-size: 13px; font-family: 'Segoe UI', Arial, sans-serif;">
			<thead style="background-color: #f2f2f2; position: sticky; top: 0; z-index: 10;">
				<tr>
					<th style="width: 40px; text-align: center; padding: 6px 8px; font-weight: 600; font-size: 12px; border: 1px solid #d1d1d1; background-color: #e7e7e7; color: #333;">
						#
					</th>
					<th style="text-align: left; padding: 6px 8px; font-weight: 600; font-size: 12px; border: 1px solid #d1d1d1; background-color: #e7e7e7; color: #333;">
						@lang('sale.invoice_no') / @lang('contact.customer')
					</th>
					@if(!empty($transactions->first()->table))
						<th style="text-align: left; padding: 6px 8px; font-weight: 600; font-size: 12px; border: 1px solid #d1d1d1; background-color: #e7e7e7; color: #333;">
							@lang('restaurant.table')
						</th>
					@endif
					<th style="text-align: right; padding: 6px 8px; font-weight: 600; font-size: 12px; border: 1px solid #d1d1d1; background-color: #e7e7e7; color: #333; white-space: nowrap;">
						@lang('sale.total')
					</th>
					<th style="text-align: center; padding: 6px 8px; font-weight: 600; font-size: 12px; border: 1px solid #d1d1d1; background-color: #e7e7e7; color: #333; width: 200px;">
						@lang('messages.action')
					</th>
				</tr>
			</thead>
			<tbody>
				@foreach ($transactions as $transaction)
					<tr style="height: 32px; background-color: #ffffff;" 
						onmouseover="this.style.backgroundColor='#e8f4f8'" 
						onmouseout="this.style.backgroundColor='#ffffff'"
						title="Customer: {{ e($transaction->contact?->name ?? 'N/A') }}@if(!empty($transaction->contact->mobile) && $transaction->contact->is_default == 0)&#10;Mobile: {{ e($transaction->contact->mobile) }}@endif&#10;Date: {{ \Carbon\Carbon::parse($transaction->transaction_date)->format('Y-m-d H:i') }}">
						<td style="text-align: center; padding: 4px 8px; vertical-align: middle; border: 1px solid #d1d1d1; color: #666; font-size: 12px;">
							{{ $loop->iteration }}
						</td>
						<td style="text-align: left; padding: 4px 8px; vertical-align: middle; border: 1px solid #d1d1d1;">
							<div style="line-height: 1.4;">
								<div style="font-weight: 600; color: #0066cc; font-size: 12px; margin-bottom: 2px;">
									{{ e($transaction->invoice_no ?? 'N/A') }}
								</div>
								<div style="color: #666; font-size: 11px;">
									{{ e($transaction->contact?->name ?? __('lang_v1.walk_in_customer')) }}
								</div>
							</div>
						</td>
						@if(!empty($transactions->first()->table))
							<td style="text-align: left; padding: 4px 8px; vertical-align: middle; border: 1px solid #d1d1d1;">
								@if(!empty($transaction->table))
									<span style="font-size: 11px; color: #0066cc;">{{ e($transaction->table->name) }}</span>
								@else
									<span style="color: #999; font-size: 11px;">-</span>
								@endif
							</td>
						@endif
						<td style="text-align: right; padding: 4px 8px; vertical-align: middle; border: 1px solid #d1d1d1; font-weight: 600; color: #107c41; font-size: 12px;">
							<span class="display_currency">{{ $transaction->final_total }}</span>
						</td>
						<td style="text-align: center; padding: 3px 6px; vertical-align: middle; border: 1px solid #d1d1d1;">
							<div style="display: flex; gap: 4px; justify-content: center; align-items: center;">
								@if(auth()->user()->can('sell.update') || auth()->user()->can('direct_sell.update'))
									<a href="{{action([\App\Http\Controllers\SellPosController::class, 'edit'], [$transaction->id]).$subtype}}" 
									   class="btn btn-xs btn-info" 
									   style="padding: 3px 8px; font-size: 11px; border-radius: 2px; border: 1px solid #0078d4; min-width: 50px;"
									   title="{{__('lang_v1.click_to_edit')}}">
										<i class="fas fa-pen" style="font-size: 10px; margin-right: 3px;"></i>
										@lang('messages.edit')
									</a>
								@endif

								@if(!auth()->user()->can('sell.update') && auth()->user()->can('edit_pos_payment'))
									<a href="{{route('edit-pos-payment', ['id' => $transaction->id])}}" 
									   class="btn btn-xs btn-info" 
									   style="padding: 3px 8px; font-size: 11px; border-radius: 2px; border: 1px solid #0078d4; min-width: 50px;"
									   title="@lang('lang_v1.add_edit_payment')">
										<i class="fas fa-money-bill-alt" style="font-size: 10px; margin-right: 3px;"></i>
										@lang('lang_v1.payment')
									</a>
								@endif

								<a href="{{action([\App\Http\Controllers\SellPosController::class, 'printInvoice'], [$transaction->id])}}" 
								   class="btn btn-xs btn-success print-invoice-link" 
								   style="padding: 3px 8px; font-size: 11px; border-radius: 2px; border: 1px solid #107c41; min-width: 50px;"
								   title="{{__('lang_v1.click_to_print')}}">
									<i class="fa fa-print" style="font-size: 10px; margin-right: 3px;"></i>
									@lang('messages.print')
								</a>

								@if(auth()->user()->can('sell.delete') || auth()->user()->can('direct_sell.delete'))
									<a href="{{action([\App\Http\Controllers\SellPosController::class, 'destroy'], [$transaction->id])}}" 
									   class="btn btn-xs btn-danger delete-sale" 
									   style="padding: 3px 8px; font-size: 11px; border-radius: 2px; border: 1px solid #d13438; min-width: 50px;"
									   title="{{__('lang_v1.click_to_delete')}}"
									   onclick="return confirm('{{__('messages.confirm_delete')}}');">
										<i class="fa fa-trash" style="font-size: 10px; margin-right: 3px;"></i>
										@lang('messages.delete')
									</a>
								@endif
							</div>
						</td>
					</tr>
				@endforeach
			</tbody>
		</table>
	</div>
@else
	<div style="text-align: center; padding: 30px 20px; color: #666; font-size: 12px;">
		<i class="fa fa-inbox" style="font-size: 32px; margin-bottom: 8px; opacity: 0.4;"></i>
		<p style="margin: 0;">@lang('sale.no_recent_transactions')</p>
	</div>
@endif