<div>
    @php
        // Check if Loyalty module is available before accessing loyalty methods
        // Use method_exists() instead of class_exists() since we're using the trait
        $isLoyaltyModuleAvailable = function_exists('module_enabled') && 
                                    module_enabled('Loyalty') && 
                                    method_exists($this, 'isLoyaltyEnabled');
        
        // Get loyalty properties for view - must be at top before any usage
        // Only call methods if module is available and methods exist
        $isLoyaltyEnabledForKiosk = false;
        $isPointsEnabledForKiosk = false;
        $isStampsEnabledForKiosk = false;
        
        if ($isLoyaltyModuleAvailable) {
            try {
                $isLoyaltyEnabledForKiosk = $this->isLoyaltyEnabled();
                if (method_exists($this, 'isPointsEnabledForKiosk')) {
                    $isPointsEnabledForKiosk = $this->isPointsEnabledForKiosk();
                }
                if (method_exists($this, 'isStampsEnabledForKiosk')) {
                    $isStampsEnabledForKiosk = $this->isStampsEnabledForKiosk();
                }
            } catch (\Exception $e) {
                // Silently fail if methods don't exist
            }
        }
        
        // Get component properties for view
        $viewCustomerId = $this->customerId ?? null;
        $viewAvailableLoyaltyPoints = $this->availableLoyaltyPoints ?? 0;
        $viewCustomerStamps = $this->customerStamps ?? [];
        $viewSelectedStampRuleId = $this->selectedStampRuleId ?? null;
        $viewSelectedStampRuleIds = $this->selectedStampRuleIds ?? [];
        $viewStampDiscountAmount = $this->stampDiscountAmount ?? 0;
        $viewStampDiscountBreakdown = $this->stampDiscountBreakdown ?? [];
        $viewServiceTotal = $serviceTotal ?? 0;
        $viewChargeBreakdown = $chargeBreakdown ?? [];
        $viewLoyaltyDiscountAmount = $this->loyaltyDiscountAmount ?? 0;
        $viewLoyaltyPointsRedeemed = $this->loyaltyPointsRedeemed ?? 0;
        $viewLoyaltyPointsValue = $this->loyaltyPointsValue ?? 0;
        $viewMaxLoyaltyDiscount = $this->maxLoyaltyDiscount ?? 0;
        $viewMinRedeemPoints = $this->minRedeemPoints ?? 0;
        $viewPointsToRedeem = $this->pointsToRedeem ?? 0;
        
        // Debug: Check if we should show loyalty section at all
        $shouldShowLoyaltySection = $isLoyaltyEnabledForKiosk && ($isPointsEnabledForKiosk || $isStampsEnabledForKiosk);
    @endphp
    <!-- 🟡 6. Payment Method Selection -->
    <div x-show="currentScreen === 'payment'" 
            x-cloak
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-x-full"
            x-transition:enter-end="opacity-100 transform translate-x-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 transform translate-x-0"
            x-transition:leave-end="opacity-0 transform -translate-x-full"
     
            x-init="() => {
                window.addEventListener('proceedToPayment', () => {
                    currentScreen = 'payment';
                    $wire.dispatch('refreshPaymentMethod');
                })
            }"
            class="min-h-screen flex items-center justify-center bg-white">
        <div class="w-full max-w-6xl px-6">
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ __('kiosk::modules.payment.heading') }}</h1>
                <p class="text-xl text-gray-600">{{ __('kiosk::modules.payment.subheading') }}</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Order Summary -->
                <div class="bg-white border border-gray-200 rounded-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">{{ __('kiosk::modules.payment.order_summary') }}</h2>
                    <div class="space-y-3 mb-6">
                        @forelse ($cartItemList['items'] as $item)
                            @php
                                $displayItemAmount = $item['amount'];
                                $originalItemAmount = $item['amount'];
                                $hasStampDiscount = false;
                                $stampDiscountLabel = null;

                                if ($viewStampDiscountAmount > 0 && !empty($viewSelectedStampRuleIds)) {
                                    if (class_exists(\Modules\Loyalty\Entities\LoyaltyStampRule::class)) {
                                        foreach ($viewSelectedStampRuleIds as $ruleId) {
                                            $stampRule = \Modules\Loyalty\Entities\LoyaltyStampRule::find($ruleId);
                                            if (!$stampRule || $stampRule->menu_item_id != $item['menu_item']['id']) {
                                                continue;
                                            }
                                            $ruleDiscount = $viewStampDiscountBreakdown[$ruleId] ?? 0;
                                            if ($ruleDiscount <= 0) {
                                                continue;
                                            }
                                            $matchingItems = collect($cartItemList['items'])->filter(function($cartItem) use ($stampRule) {
                                                return $cartItem['menu_item']['id'] == $stampRule->menu_item_id;
                                            });
                                            $totalMatchingQuantity = $matchingItems->sum('quantity');
                                            if ($totalMatchingQuantity > 0) {
                                                $discountPerUnit = $ruleDiscount / $totalMatchingQuantity;
                                                $originalItemAmount = $item['amount'] + ($discountPerUnit * $item['quantity']);
                                                $hasStampDiscount = true;
                                                if ($stampRule->reward_type === 'discount_percent') {
                                                    $stampDiscountLabel = __('loyalty::app.discount') . ' ' . number_format($stampRule->reward_value, 2) . '%';
                                                } elseif ($stampRule->reward_type === 'discount_amount') {
                                                    $stampDiscountLabel = __('loyalty::app.discount');
                                                }
                                            }
                                        }
                                    }
                                }
                            @endphp
                            <div class="flex justify-between text-lg" wire:key="payment-cart-item-{{ $item['id'] }}">
                                <span class="flex items-center gap-2">
                                    {{ $item['quantity'] }}x {{ $item['menu_item']['name'] }}
                                    @if($hasStampDiscount)
                                        <span class="px-2 py-0.5 text-[10px] rounded bg-green-100 text-green-700">
                                            {{ $stampDiscountLabel ?? __('loyalty::app.stampDiscount') }}
                                        </span>
                                    @endif
                                </span>
                                <span>
                                    @if($hasStampDiscount && $originalItemAmount > $displayItemAmount)
                                        <span class="line-through text-gray-400 text-sm mr-2">
                                            {{ currency_format($originalItemAmount, $restaurant->currency_id) }}
                                        </span>
                                    @endif
                                    {{ currency_format($displayItemAmount, $restaurant->currency_id) }}
                                </span>
                            </div>
                        @empty
                            <div class="text-center py-4 text-gray-500">
                                <span>{{ __('kiosk::modules.payment.empty') }}</span>
                            </div>
                        @endforelse
                    </div>
                    <div class="border-t border-gray-200 pt-6 space-y-3">
                        @if(!empty($viewSelectedStampRuleIds) && class_exists(\Modules\Loyalty\Entities\LoyaltyStampRule::class))
                            @foreach($viewSelectedStampRuleIds as $ruleId)
                                @php
                                    $stampRule = \Modules\Loyalty\Entities\LoyaltyStampRule::find($ruleId);
                                @endphp
                                @if($stampRule && $stampRule->reward_type === 'free_item')
                                    <div class="flex justify-between text-lg">
                                        <span class="flex items-center gap-2">
                                            1x {{ $stampRule->rewardMenuItem->item_name ?? __('loyalty::app.freeItem') }}
                                            <span class="px-2 py-0.5 text-[10px] rounded bg-green-100 text-green-700">
                                                {{ __('app.freeItem') }}
                                            </span>
                                        </span>
                                        <span>{{ currency_format(0, $restaurant->currency_id) }}</span>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        <div class="flex justify-between text-lg">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-600">{{ __('kiosk::modules.payment.subtotal') }}</span>
                                @if($viewStampDiscountAmount > 0)
                                    <span class="px-1.5 py-0.5 text-xs rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                                        @lang('loyalty::app.stampDiscount')
                                        (-{{ currency_format($viewStampDiscountAmount, $restaurant->currency_id) }})
                                    </span>
                                @endif
                            </div>
                            <span class="font-semibold">{{ currency_format($discountedSubtotal ?? $subtotal, $restaurant->currency_id) }}</span>
                        </div>
                        
                        @if($viewLoyaltyDiscountAmount > 0 && $viewLoyaltyPointsRedeemed > 0)
                            <div class="flex justify-between text-lg text-green-600">
                                <span>{{ __('loyalty::app.loyaltyDiscount') }}</span>
                                <span class="font-semibold">-{{ currency_format($viewLoyaltyDiscountAmount, $restaurant->currency_id) }}</span>
                            </div>
                            <div class="text-sm text-gray-500">
                                {{ __('loyalty::app.pointsRedeemed') }}: {{ number_format($viewLoyaltyPointsRedeemed) }} @lang('loyalty::app.points')
                            </div>
                        @endif
                        @if($totalTaxAmount > 0)
                            @if($taxMode === 'order' && !empty($taxBreakdown))
                                @foreach($taxBreakdown as $taxName => $taxInfo)
                                    <div class="flex justify-between text-lg">
                                        <span class="text-gray-600">{{ $taxName }} ({{ number_format($taxInfo['percent'], 2) }}%)</span>
                                        <span class="font-semibold">{{ currency_format($taxInfo['amount'], $restaurant->currency_id) }}</span>
                                    </div>
                                @endforeach
                            @else
                                @if(!empty($taxBreakdown))
                                    @foreach($taxBreakdown as $taxName => $taxInfo)
                                        <div class="flex justify-between text-lg">
                                            <span class="text-gray-600">{{ $taxName }} ({{ number_format($taxInfo['percent'], 2) }}%)</span>
                                            <span class="font-semibold">{{ currency_format($taxInfo['amount'], $restaurant->currency_id) }}</span>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="flex justify-between text-lg">
                                        <span class="text-gray-600">{{ __('kiosk::modules.payment.tax') }}</span>
                                        <span class="font-semibold">{{ currency_format($totalTaxAmount, $restaurant->currency_id) }}</span>
                                    </div>
                                @endif
                            @endif
                        @endif
                        @if(!empty($viewChargeBreakdown))
                            @foreach($viewChargeBreakdown as $charge)
                                <div class="flex justify-between text-lg">
                                    <span class="text-gray-600">{{ $charge['name'] ?? __('charges.charge') }}</span>
                                    <span class="font-semibold">{{ currency_format($charge['amount'] ?? 0, $restaurant->currency_id) }}</span>
                                </div>
                            @endforeach
                        @endif
                        <div class="flex justify-between text-2xl font-bold text-gray-900 border-t border-gray-200 pt-3">
                            <span>{{ __('kiosk::modules.payment.total') }}</span>
                            <span>{{ currency_format($total, $restaurant->currency_id) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Methods -->
                <div class="bg-white border border-gray-200 rounded-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">{{ __('kiosk::modules.payment.heading') }}</h2>
                    <!-- Loyalty Points Redemption -->
                    @if($isPointsEnabledForKiosk)
                        @if($viewCustomerId && $viewAvailableLoyaltyPoints > 0)
                        <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 hover:bg-gray-50 transition-all duration-200">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center">
                                    <div class="w-16 h-16 bg-skin-base rounded-lg flex items-center justify-center mr-6">
                                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    </div>
                                    <div class="text-left">
                                        <div class="font-bold text-gray-900 text-lg">{{ __('loyalty::app.loyaltyProgram') }}</div>
                                        <div class="text-gray-600 text-sm">{{ __('loyalty::app.redeemLoyaltyPoints') }}</div>
                                    </div>
                                </div>
                                @if($viewLoyaltyDiscountAmount > 0)
                                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                @endif
                            </div>
                            
                            <!-- Loyalty Details -->
                            <div class="space-y-2 mb-4">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">{{ __('loyalty::app.availablePoints') }}:</span>
                                    <span class="text-sm font-semibold text-gray-900">{{ number_format($viewAvailableLoyaltyPoints) }} @lang('loyalty::app.points')</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">{{ __('loyalty::app.pointsValue') }}:</span>
                                    <span class="text-sm font-semibold text-gray-900">{{ currency_format($viewLoyaltyPointsValue * $viewAvailableLoyaltyPoints, $restaurant->currency_id) }}</span>
                                </div>
                                @if($viewMaxLoyaltyDiscount > 0)
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm text-gray-600">{{ __('loyalty::app.maxDiscountToday') }}:</span>
                                        <span class="text-sm font-semibold text-gray-900">{{ currency_format($viewMaxLoyaltyDiscount, $restaurant->currency_id) }}</span>
                                    </div>
                                @endif
                                @if($viewMinRedeemPoints > 0)
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm text-gray-600">{{ __('loyalty::app.minRedeemPoints') }}:</span>
                                        <span class="text-sm font-semibold text-gray-900">{{ number_format($viewMinRedeemPoints) }} @lang('loyalty::app.points')</span>
                                    </div>
                                @endif
                                @if($viewPointsToRedeem > 0 && $viewLoyaltyPointsRedeemed == 0)
                                    <div class="flex justify-between items-center pt-2 border-t border-gray-200">
                                        <span class="text-sm font-medium text-blue-600">{{ __('loyalty::app.pointsToRedeem') }}:</span>
                                        <span class="text-sm font-bold text-blue-600">{{ number_format($viewPointsToRedeem) }} @lang('loyalty::app.points')</span>
                                    </div>
                                    @php
                                        // Calculate preview discount amount for display only (not applied)
                                        $previewDiscount = 0;
                                        if ($viewPointsToRedeem > 0 && $viewLoyaltyPointsValue > 0) {
                                            $previewDiscountAmount = $viewPointsToRedeem * $viewLoyaltyPointsValue;
                                            if ($viewMaxLoyaltyDiscount > 0) {
                                                $previewDiscount = min($previewDiscountAmount, $viewMaxLoyaltyDiscount);
                                            } else {
                                                $previewDiscount = $previewDiscountAmount;
                                            }
                                        }
                                    @endphp
                                    @if($previewDiscount > 0)
                                        <div class="flex justify-between items-center">
                                            <span class="text-sm font-medium text-blue-600">{{ __('loyalty::app.discountAmount') }}:</span>
                                            <span class="text-sm font-bold text-blue-600">{{ currency_format($previewDiscount, $restaurant->currency_id) }}</span>
                                        </div>
                                    @endif
                                @endif
                                @if($viewLoyaltyDiscountAmount > 0 && $viewLoyaltyPointsRedeemed > 0)
                                    <div class="flex justify-between items-center pt-2 border-t border-green-200">
                                        <span class="text-sm font-medium text-green-600">{{ __('loyalty::app.discountApplied') }}:</span>
                                        <span class="text-sm font-bold text-green-600">{{ currency_format($viewLoyaltyDiscountAmount, $restaurant->currency_id) }}</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs text-gray-500">{{ __('loyalty::app.pointsRedeemed') }}:</span>
                                        <span class="text-xs text-gray-500">{{ number_format($viewLoyaltyPointsRedeemed) }} @lang('loyalty::app.points')</span>
                                    </div>
                                @endif
                            </div>
                            
                            <!-- Action Button -->
                            <div>
                                @if($viewLoyaltyDiscountAmount > 0 && $viewLoyaltyPointsRedeemed > 0)
                                    <button wire:click="removeLoyaltyRedemption" 
                                            class="w-full bg-red-100 text-red-700 py-3 rounded-lg font-medium text-base hover:bg-red-200 transition-colors duration-200">
                                        {{ __('loyalty::app.removeDiscount') }}
                                    </button>
                                @elseif($viewAvailableLoyaltyPoints > 0 && $viewLoyaltyPointsRedeemed == 0)
                                    <button wire:click="redeemLoyaltyPoints" 
                                            class="w-full bg-skin-base text-white py-3 rounded-lg font-medium text-base hover:bg-skin-base transition-all duration-200">
                                        {{ __('loyalty::app.redeemLoyaltyPoints') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                        @elseif($viewCustomerId && $viewAvailableLoyaltyPoints == 0)
                            <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 bg-gray-50">
                                <div class="text-center text-gray-600">
                                    <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <p class="text-sm">{{ __('loyalty::app.noPointsAvailable') }}</p>
                                </div>
                            </div>
                        @elseif(!$viewCustomerId)
                            <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 bg-gray-50">
                                <div class="text-center text-gray-600">
                                    <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                    <p class="text-sm">{{ __('Please provide customer information to redeem loyalty points.') }}</p>
                                </div>
                            </div>
                        @endif
                    @endif
                    
                    <!-- Stamp Redemption -->
                    @if($isStampsEnabledForKiosk)
                        @php
                            // Calculate stamp redemption status (outside conditionals so it's available everywhere)
                            $hasRedeemedStamps = (!empty($viewSelectedStampRuleIds) || $viewSelectedStampRuleId !== null) || $viewStampDiscountAmount > 0;
                            $redeemableStamps = collect($viewCustomerStamps)->filter(function ($stampData) {
                                return ($stampData['can_redeem'] ?? false) === true;
                            });
                            $hasRedeemableStamps = $redeemableStamps->isNotEmpty();
                        @endphp
                        @if($viewCustomerId && !empty($viewCustomerStamps))
                            @if($hasRedeemableStamps)
                            <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 hover:bg-gray-50 transition-all duration-200">
                                <div class="flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                        <div class="w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center mr-6">
                                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-bold text-gray-900 text-lg">{{ __('loyalty::app.redeemStamps') }}</div>
                                            <div class="text-gray-600 text-sm">{{ __('loyalty::app.redeemStampsDescription') }}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Available Stamps -->
                                <div class="space-y-3 mb-4">
                                    @foreach($redeemableStamps as $stampData)
                                        @php
                                            $rule = $stampData['rule'];
                                            $availableStamps = $stampData['available_stamps'] ?? 0;
                                            $stampsRequired = $stampData['stamps_required'] ?? 0;
                                            $canRedeem = $stampData['can_redeem'] ?? false;
                                        @endphp
                                        @if($canRedeem)
                                            @php
                                                $isSelected = in_array($rule->id, $viewSelectedStampRuleIds, true) || $viewSelectedStampRuleId == $rule->id;
                                            @endphp
                                            <div class="border border-green-200 rounded-lg p-4 {{ $isSelected ? 'bg-green-50 border-green-400' : '' }}">
                                                <div class="flex items-center justify-between mb-2">
                                                    <div>
                                                        <div class="font-semibold text-gray-900">{{ $rule->menuItem->item_name ?? __('loyalty::app.unknownItem') }}</div>
                                                        <div class="text-sm text-gray-600">
                                                            {{ __('loyalty::app.availableStamps') }}: {{ $availableStamps }}/{{ $stampsRequired }}
                                                        </div>
                                                    </div>
                                                    @if($isSelected)
                                                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                        </svg>
                                                    @endif
                                                </div>
                                                @if($rule->reward_type === 'free_item')
                                                    <div class="text-sm text-green-600 font-medium">
                                                        {{ __('loyalty::app.reward') }}: {{ __('app.freeItem') }} - {{ $rule->rewardMenuItem->item_name ?? __('loyalty::app.unknownItem') }}
                                                    </div>
                                                @elseif($rule->reward_type === 'discount_percent')
                                                    <div class="text-sm text-green-600 font-medium">
                                                        {{ __('loyalty::app.reward') }}: {{ number_format($rule->reward_value, 2) }}% {{ __('loyalty::app.discount') }}
                                                    </div>
                                                @elseif($rule->reward_type === 'discount_amount')
                                                    <div class="text-sm text-green-600 font-medium">
                                                        {{ __('loyalty::app.reward') }}: {{ currency_format($rule->reward_value, $restaurant->currency_id) }} {{ __('loyalty::app.discount') }}
                                                    </div>
                                                @endif
                                                @if(!$isSelected)
                                                    <button wire:click="redeemStamps({{ $rule->id }})" 
                                                            class="mt-2 w-full bg-green-500 text-white py-2 rounded-lg font-medium text-sm hover:bg-green-600 transition-all duration-200">
                                                        {{ __('loyalty::app.redeem') }}
                                                    </button>
                                                @else
                                                    <button wire:click="removeStampRedemption({{ $rule->id }})" 
                                                            class="mt-2 w-full bg-red-100 text-red-700 py-2 rounded-lg font-medium text-sm hover:bg-red-200 transition-colors duration-200">
                                                        {{ __('loyalty::app.removeStampRedemption') }}
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            @endif
                        @elseif($viewCustomerId && empty($viewCustomerStamps))
                            <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 bg-gray-50">
                                <div class="text-center text-gray-600">
                                    <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <p class="text-sm">{{ __('loyalty::app.noStampsAvailable') }}</p>
                                </div>
                            </div>
                        @elseif(!$viewCustomerId)
                            <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 bg-gray-50">
                                <div class="text-center text-gray-600">
                                    <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                    <p class="text-sm">{{ __('Please provide customer information to redeem stamps.') }}</p>
                                </div>
                            </div>
                        @endif
                    @endif
                    
                    @if($isLoyaltyEnabledForKiosk && !$isPointsEnabledForKiosk && !$isStampsEnabledForKiosk)
                        <!-- Loyalty is enabled but points/stamps are not enabled for kiosk -->
                        <div class="mb-6 border-2 border-gray-200 rounded-lg p-6 bg-gray-50">
                            <div class="text-center text-gray-600">
                                <p class="text-sm">{{ __('Loyalty program is enabled but points and stamps are not enabled for kiosk platform.') }}</p>
                            </div>
                        </div>
                    @endif
                    
                    <div class="space-y-4">
                  
                        <!-- Cash -->
                        <button @click="selectPaymentMethod('due'); $wire.selectPaymentMethod('due')" 
                                :class="{'border-skin-base': paymentMethod === 'due'}"
                                class="w-full border-2 border-gray-200 rounded-lg p-6 flex items-center justify-between hover:bg-gray-50 transition-all duration-200">
                            <div class="flex items-center">
                                <div class="w-16 h-16 bg-skin-base rounded-lg flex items-center justify-center mr-6">
                                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                                    </svg>
                                </div>
                                <div class="text-left">
                                    <div class="font-bold text-gray-900 text-lg">{{ __('kiosk::modules.payment.cash') }}</div>
                                    <div class="text-gray-600">{{ __('kiosk::modules.payment.cash_desc') }}</div>
                                </div>
                            </div>
                            <svg x-show="paymentMethod === 'due'" class="w-8 h-8 text-skin-base" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </button>

                        @if($paymentGateway && $paymentGateway->is_qr_payment_enabled)
                            <button @click="selectPaymentMethod('upi'); $wire.selectPaymentMethod('upi')" 
                                :class="{'border-skin-base': paymentMethod === 'upi'}"
                                class="w-full border-2 border-gray-200 rounded-lg p-6 flex items-center justify-between hover:bg-gray-50 transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="w-16 h-16 bg-skin-base rounded-lg flex items-center justify-center mr-6">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-qr-code-scan w-8 h-8 text-white" viewBox="0 0 16 16">
                                            <path d="M0 .5A.5.5 0 0 1 .5 0h3a.5.5 0 0 1 0 1H1v2.5a.5.5 0 0 1-1 0zm12 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V1h-2.5a.5.5 0 0 1-.5-.5M.5 12a.5.5 0 0 1 .5.5V15h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H15v-2.5a.5.5 0 0 1 .5-.5M4 4h1v1H4z"/>
                                            <path d="M7 2H2v5h5zM3 3h3v3H3zm2 8H4v1h1z"/>
                                            <path d="M7 9H2v5h5zm-4 1h3v3H3zm8-6h1v1h-1z"/>
                                            <path d="M9 2h5v5H9zm1 1v3h3V3zM8 8v2h1v1H8v1h2v-2h1v2h1v-1h2v-1h-3V8zm2 2H9V9h1zm4 2h-1v1h-2v1h3zm-4 2v-1H8v1z"/>
                                            <path d="M12 9h2V8h-2z"/>
                                          </svg>
                                    </div>
                                    <div class="text-left">
                                        <div class="font-bold text-gray-900 text-lg">{{ __('kiosk::modules.payment.upi') }}</div>
                                        <div class="text-gray-600">{{ __('kiosk::modules.payment.upi_desc') }}</div>
                                    </div>
                                </div>
                                <svg x-show="paymentMethod === 'upi'" class="w-8 h-8 text-skin-base" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </button>
                            @if($showQrCode && $paymentGateway && $paymentGateway->qr_code_image_url)
                            <div class="mt-4">
                                <div class="text-center">
                                    <img src="{{ $paymentGateway->qr_code_image_url }}" alt="UPI QR Code" class=" max-w-48 mx-auto h-48">
                                </div>
                            </div>
                            <p class="text-gray-600 text-sm mt-2 text-center">{{ __('kiosk::modules.payment.upi_qr_code_desc') }}</p>
                            @endif
                        @endif
                    </div>

                    <!-- Action Buttons -->
                    <div class="mt-8 space-y-4">
                        <button @click="processPayment" wire:click="processPayment" 
                                :disabled="!paymentMethod"
                                :class="{'opacity-50 cursor-not-allowed': !paymentMethod}"
                                class="w-full bg-skin-base text-white py-6 rounded-lg font-bold text-xl transition-all duration-200 hover:bg-skin-base">
                            {{ __('kiosk::modules.payment.place_order') }}
                        </button>
                        <button @click="currentScreen = 'customer-info'" 
                                class="w-full border-2 border-gray-300 text-gray-700 py-4 rounded-lg font-medium text-lg hover:bg-gray-50 transition-colors duration-200">
                            {{ __('kiosk::modules.payment.back') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
