@extends('layout.base')

@section('layout.base.head')
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
@endsection

@section('layout.base.header')
<!-- Sticky Header -->
<div id="sticky-header" class="sticky top-0 z-40 bg-white border-b border-gray-200 shadow-sm transition-all duration-300">
    <div class="max-w-5xl mx-auto px-4 py-3">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <div>
                    <h1 class="text-base font-bold text-gray-900">
                        {{ $table->area ? $table->area->name . ' - ' . $table->name : $table->name }}
                    </h1>
                    <div class="flex items-center space-x-2 text-xs text-gray-500">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            @if( $secure_access ?? false )
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            @else
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
                            @endif
                        </svg>
                        <span>{{ __( $secure_access ?? false ? 'Secure' : 'Public' ) }}</span>
                        <span class="text-gray-300">•</span>
                        <span>{{ Carbon\Carbon::parse( $table->updated_at )->format( 'H:i' ) }}</span>
                    </div>
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <div class="px-3 py-1 rounded-full text-xs font-medium {{ $table->busy ? 'bg-orange-100 text-orange-700' : 'bg-green-100 text-green-700' }}">
                    {{ $table->busy ? __( 'Occupied' ) : __( 'Available' ) }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('layout.base.body')
<div class="min-h-screen bg-gray-50 pb-24">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

        <!-- Bills List -->
        @if( ! empty( $bills ) && count( $bills ) > 0 )
            @foreach( $bills as $billIndex => $bill )
                <div class="bill-card-modern mb-4 bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-md">
                    <!-- Bill Header with Status -->
                    <div class="px-2 py-4 {{ ($bill['payment_status'] ?? '') === 'paid' ? 'bg-gradient-to-r from-green-50 to-emerald-50' : (($bill['payment_status'] ?? '') === 'partially_paid' ? 'bg-gradient-to-r from-amber-50 to-yellow-50' : 'bg-gradient-to-r from-red-50 to-pink-50') }}">
                        <div class="flex items-center justify-between gap-2">
                            <div class="flex items-center space-x-2 flex-1 min-w-0">
                                <div class="w-8 h-8 rounded-lg {{ ($bill['payment_status'] ?? '') === 'paid' ? 'bg-green-500' : (($bill['payment_status'] ?? '') === 'partially_paid' ? 'bg-amber-500' : 'bg-red-500') }} flex items-center justify-center shadow-lg flex-shrink-0">
                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        @if( ($bill['payment_status'] ?? '') === 'paid' )
                                            <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"></path>
                                        @elseif( ($bill['payment_status'] ?? '') === 'partially_paid' )
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        @else
                                            <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-1"></path>
                                        @endif
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">{{ __( 'Order' ) }}</p>
                                    <p class="text-xs font-bold text-gray-900 mt-0.5 truncate">{{ $bill['code'] ?? __('No Bill Code') }}</p>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                @if( ($bill['payment_status'] ?? '') === 'paid' )
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold bg-green-500 text-white shadow-sm">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                        </svg>
                                        {{ __( 'Paid' ) }}
                                    </span>
                                @elseif( ($bill['payment_status'] ?? '') === 'partially_paid' )
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold bg-amber-500 text-white shadow-sm">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        {{ __( 'Partial' ) }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white shadow-sm animate-pulse">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                        </svg>
                                        {{ __( 'Unpaid' ) }}
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Total Amount - Large & Prominent -->
                        <div class="mt-4 pt-4 border-t {{ ($bill['payment_status'] ?? '') === 'paid' ? 'border-green-200' : (($bill['payment_status'] ?? '') === 'partially_paid' ? 'border-amber-200' : 'border-red-200') }}">
                            <div class="flex items-end justify-between">
                                <div>
                                    <p class="text-xs font-medium text-gray-600 uppercase">{{ __( 'Total Amount' ) }}</p>
                                    <p class="text-3xl font-bold text-gray-900 mt-1">
                                        {{ ns()->currency->define( $bill['totals']['total'] ?? 0 ) }}
                                    </p>
                                </div>
                                @if( ($bill['totals']['tendered'] ?? 0) > 0 && ($bill['payment_status'] ?? '') !== 'paid' )
                                    <div class="text-right">
                                        <p class="text-xs font-medium text-gray-600">{{ __( 'Paid' ) }}</p>
                                        <p class="text-lg font-bold text-green-600">
                                            {{ ns()->currency->define( $bill['totals']['tendered'] ?? 0 ) }}
                                        </p>
                                        <p class="text-xs font-medium text-red-600 mt-1">
                                            {{ __( 'Remaining' ) }}: {{ ns()->currency->define( ($bill['totals']['total'] ?? 0) - ($bill['totals']['tendered'] ?? 0) ) }}
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Bill Content -->
                    <div class="p-4">
                        <!-- Collapsible Items List -->
                        @if( count( $bill['products'] ?? [] ) > 0 )
                            <div class="mb-4">
                                <button onclick="toggleItems('bill-{{ $billIndex }}')" 
                                        class="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors duration-200">
                                    <div class="flex items-center space-x-2">
                                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                                        </svg>
                                        <span class="font-semibold text-gray-900">{{ __( 'Items' ) }}</span>
                                        <span class="px-2 py-0.5 text-xs font-bold bg-blue-100 text-blue-700 rounded-full">
                                            {{ count( $bill['products'] ?? [] ) }}
                                        </span>
                                    </div>
                                    <svg id="bill-{{ $billIndex }}-icon" class="w-5 h-5 text-gray-400 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                
                                <div id="bill-{{ $billIndex }}-items" class="mt-3 space-y-2 hidden">
                                    @foreach( ($bill['products'] ?? []) as $productIndex => $product )
                                        <div class="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:border-blue-300 transition-colors duration-200">
                                            <div class="flex items-center space-x-3 flex-1">
                                                <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                                    <span class="text-sm font-bold text-blue-700">{{ $productIndex + 1 }}</span>
                                                </div>
                                                <div class="flex-1 min-w-0">
                                                    <h5 class="font-semibold text-gray-900 truncate">
                                                        {{ $product['product']['name'] ?? $product['name'] ?? $product['product_name'] ?? __('Product') }}
                                                    </h5>
                                                    <div class="flex items-center space-x-3 mt-1 text-xs text-gray-600">
                                                        <span class="flex items-center font-medium">
                                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                                            </svg>
                                                            {{ $product['quantity'] ?? 1 }}×
                                                        </span>
                                                        <span class="text-gray-400">•</span>
                                                        <span class="flex items-center">
                                                            {{ ns()->currency->define( $product['unit_price'] ?? $product['price'] ?? 0 ) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-right ml-3">
                                                <p class="text-base font-bold text-gray-900">
                                                    {{ ns()->currency->define( $product['total_price'] ?? $product['total'] ?? 0 ) }}
                                                </p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Bill Summary -->
                        <div class="border-t border-gray-200 pt-4">
                            <div class="bg-gray-50 rounded-xl p-4 space-y-2.5">
                                <div class="flex justify-between items-center text-sm">
                                    <span class="text-gray-600 font-medium">{{ __( 'Subtotal' ) }}</span>
                                    <span class="font-semibold text-gray-900">{{ ns()->currency->define( $bill['totals']['subtotal'] ?? 0 ) }}</span>
                                </div>
                                @if( ($bill['totals']['discount'] ?? 0) > 0 )
                                    <div class="flex justify-between items-center text-sm">
                                        <span class="text-gray-600 font-medium flex items-center">
                                            <svg class="w-4 h-4 mr-1 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                            </svg>
                                            {{ __( 'Discount' ) }}
                                        </span>
                                        <span class="text-red-600 font-bold">-{{ ns()->currency->define( $bill['totals']['discount'] ?? 0 ) }}</span>
                                    </div>
                                @endif
                                @if( ($bill['totals']['tax'] ?? 0) > 0 )
                                    <div class="flex justify-between items-center text-sm">
                                        <span class="text-gray-600 font-medium">{{ __( 'Tax' ) }}</span>
                                        <span class="font-semibold text-gray-900">{{ ns()->currency->define( $bill['totals']['tax'] ?? 0 ) }}</span>
                                    </div>
                                @endif
                                <div class="border-t border-gray-200 pt-2.5 mt-2">
                                    <div class="flex justify-between items-center">
                                        <span class="text-base font-bold text-gray-900">{{ __( 'Total' ) }}</span>
                                        <span class="text-2xl font-bold text-blue-600">{{ ns()->currency->define( $bill['totals']['total'] ?? 0 ) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Options -->
                        @if( ($bill['payment_status'] ?? '') !== 'paid' )
                            <div class="mt-6 space-y-4">
                                <!-- Payment Amount Display -->
                                <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-4 text-white shadow-lg">
                                    <p class="text-xs font-semibold uppercase tracking-wider opacity-90">
                                        @if( ($bill['payment_status'] ?? '') === 'partially_paid' )
                                            {{ __( 'Remaining Balance' ) }}
                                        @else
                                            {{ __( 'Amount to Pay' ) }}
                                        @endif
                                    </p>
                                    <p class="text-3xl font-bold mt-1">
                                        {{ ns()->currency->define( ($bill['payment_status'] ?? '') === 'partially_paid' ? (($bill['totals']['total'] ?? 0) - ($bill['totals']['tendered'] ?? 0)) : ($bill['totals']['total'] ?? 0) ) }}
                                    </p>
                                </div>
                                
                                <!-- Payment Method Selection -->
                                <div class="grid grid-cols-3 gap-2">
                                    <!-- Card Payment -->
                                    <button onclick="openWalletSelection('{{ $bill['code'] ?? '' }}', '{{ ($bill['payment_status'] ?? '') === 'partially_paid' ? (($bill['totals']['total'] ?? 0) - ($bill['totals']['tendered'] ?? 0)) : ($bill['totals']['total'] ?? 0) }}', 'card')" 
                                            class="flex flex-col items-center p-3 bg-white hover:bg-blue-50 rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-200 transform hover:scale-105 shadow-sm">
                                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg mb-2 flex items-center justify-center">
                                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                                            </svg>
                                        </div>
                                        <span class="text-xs font-medium text-gray-700 text-center">{{ __( 'Card' ) }}</span>
                                        <span class="text-xs text-gray-500 text-center">{{ __( 'Nol/Visa/MC' ) }}</span>
                                    </button>
                                    
                                    <!-- QR / Wallets -->
                                    <button onclick="openWalletSelection('{{ $bill['code'] ?? '' }}', '{{ ($bill['payment_status'] ?? '') === 'partially_paid' ? (($bill['totals']['total'] ?? 0) - ($bill['totals']['tendered'] ?? 0)) : ($bill['totals']['total'] ?? 0) }}', 'qr')" 
                                            class="flex flex-col items-center p-3 bg-white hover:bg-purple-50 rounded-xl border border-gray-200 hover:border-purple-300 transition-all duration-200 transform hover:scale-105 shadow-sm">
                                        <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg mb-2 flex items-center justify-center">
                                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h4m-4 0h3m-3 0v1M4 12v4m16-4v4m0 0h2m-2 0h2m-2 0v2m0-2v2"></path>
                                            </svg>
                                        </div>
                                        <span class="text-xs font-medium text-gray-700 text-center">{{ __( 'QR / Wallets' ) }}</span>
                                        <span class="text-xs text-gray-500 text-center">{{ __( 'Aani/Alipay' ) }}</span>
                                    </button>
                                    
                                    <!-- Online Payment -->
                                    <button onclick="startMomentPayOnlinePayment('{{ $bill['code'] ?? '' }}', '{{ ($bill['payment_status'] ?? '') === 'partially_paid' ? (($bill['totals']['total'] ?? 0) - ($bill['totals']['tendered'] ?? 0)) : ($bill['totals']['total'] ?? 0) }}')"
                                            class="flex flex-col items-center p-3 bg-white hover:bg-green-50 rounded-xl border border-gray-200 hover:border-green-300 transition-all duration-200 transform hover:scale-105 shadow-sm">
                                        <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg mb-2 flex items-center justify-center">
                                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9V3"></path>
                                            </svg>
                                        </div>
                                        <span class="text-xs font-medium text-gray-700 text-center">{{ __( 'Online Pay' ) }}</span>
                                        <span class="text-xs text-gray-500 text-center">{{ __( 'MomentPay Gateway' ) }}</span>
                                    </button>
                                </div>
                            </div>
                        @else
                            <!-- Paid Status Message -->
                            <div class="mt-6 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl p-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-bold text-green-900">{{ __( 'Payment Complete' ) }}</p>
                                        <p class="text-sm text-green-700">{{ __( 'Thank you for your payment!' ) }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        @else
            <!-- No Bills State -->
            <div class="text-center py-16">
                <div class="mx-auto w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center mb-6 shadow-inner">
                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">{{ __( 'No Bills Found' ) }}</h3>
                <p class="text-gray-600 mb-6">{{ __( 'This table currently has no pending bills.' ) }}</p>
                <a href="{{ request()->fullUrl() }}" 
                   class="inline-flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    <span>{{ __( 'Refresh' ) }}</span>
                </a>
            </div>
        @endif
    </div>
    
    <!-- Floating Refresh Button -->
    <div class="fixed bottom-6 right-6 z-50">
        <a href="{{ request()->fullUrl() }}" 
           class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-full shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-110 active:scale-95"
           title="{{ __( 'Refresh Bills' ) }}">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
        </a>
    </div>

    <!-- Wallet Selection Modal -->
    <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-[9999] p-4 transition-all duration-300 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen py-4">
            <div class="bg-white rounded-2xl p-6 w-full max-w-md shadow-2xl transform transition-all duration-300 relative">
            <div class="text-center mb-6">
                <div class="mx-auto w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
                    <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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 id="modalTitle" class="text-xl font-bold text-gray-900 mb-2">{{ __( 'Choose Payment Method' ) }}</h3>
                <div class="flex items-center justify-center space-x-2 text-sm text-gray-600">
                    <span>{{ __( 'Bill:' ) }}</span>
                    <span id="modalBillCode" class="font-semibold"></span>
                    <span>•</span>
                    <span id="modalAmount" class="font-bold text-blue-600"></span>
                </div>
            </div>
            
            <!-- Wallet Grid -->
            <div id="walletGrid" class="grid grid-cols-2 gap-3 mb-6 max-h-96 overflow-y-auto">
                <!-- Wallets will be populated here -->
            </div>
            
            <!-- Back/Close Buttons -->
            <div class="flex space-x-3">
                <button onclick="closeWalletModal()" 
                        class="flex-1 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                    {{ __( 'Close' ) }}
                </button>
            </div>
            </div>
        </div>
    </div>
    
    <!-- Payment Processing Modal -->
    <div id="processingModal" class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-[9999] p-4 transition-all duration-300 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen py-4">
            <div class="bg-white rounded-2xl p-8 w-full max-w-sm shadow-2xl text-center transform transition-all duration-300">
            <div class="mx-auto w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
                <div class="w-8 h-8 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ __( 'Processing Payment' ) }}</h3>
            <p class="text-gray-600 mb-4">{{ __( 'Please wait while we process your payment...' ) }}</p>
            <div id="paymentInstructions" class="mb-6"></div>
            <button onclick="cancelPayment()" 
                    class="w-full bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                {{ __( 'Cancel' ) }}
            </button>
            </div>
        </div>
    </div>
    
    <!-- Payment Success Modal -->
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-[9999] p-4 transition-all duration-300 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen py-4">
            <div class="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl text-center transform transition-all duration-300">
            <div class="mx-auto w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ __( 'Payment Successful!' ) }}</h3>
            <p class="text-gray-600 mb-4">{{ __( 'Your payment has been processed successfully.' ) }}</p>
            <div id="successDetails" class="p-4 bg-green-50 rounded-xl border border-green-200 mb-6">
                <!-- Success details will be populated here -->
            </div>
            <div class="flex space-x-3">
                <button onclick="closeSuccessModal()" 
                        class="flex-1 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                    {{ __( 'Close' ) }}
                </button>
                <button onclick="refreshPage()" 
                        class="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                    {{ __( 'Refresh' ) }}
                </button>
            </div>
            </div>
        </div>
    </div>
    
    <!-- Payment Failed Modal -->
    <div id="failedModal" class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-[9999] p-4 transition-all duration-300 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen py-4">
            <div class="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl text-center transform transition-all duration-300">
                <div class="mx-auto w-20 h-20 bg-gradient-to-br from-red-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ __( 'Payment Failed' ) }}</h3>
                <p id="failureReason" class="text-gray-600 mb-6">{{ __( 'Please try again or use a different payment method.' ) }}</p>
                <div class="flex space-x-3">
                    <button onclick="closeFailedModal()" 
                            class="flex-1 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                        {{ __( 'Close' ) }}
                    </button>
                    <button onclick="retryPayment()" 
                            class="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white py-3 px-4 rounded-xl font-semibold transition-all duration-200 transform active:scale-95">
                        {{ __( 'Retry' ) }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Include Gastro Payment CSS -->
<link rel="stylesheet" href="/css/gastro-payment.css?v={{ time() }}">
<style>
    /* Modal enhancements for better positioning */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        overflow-y: auto;
    }
    
    .modal-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        transform: scale(1);
        transition: all 0.3s ease;
    }
    
    .modal-content.entering {
        transform: scale(0.95);
        opacity: 0;
    }
    
    /* Wallet grid enhancements */
    .wallet-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-height: 24rem;
        overflow-y: auto;
        padding: 0.25rem;
    }
    
    .wallet-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .wallet-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #3b82f6;
    }
    
    .wallet-item:active {
        transform: translateY(0) scale(0.98);
    }
    
    .wallet-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 0.5rem;
        overflow: hidden;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
    }
    
    .wallet-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .wallet-name {
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        color: #1f2937;
        margin-bottom: 0.25rem;
    }
    
    .wallet-country {
        font-size: 0.75rem;
        color: #6b7280;
        background: #f3f4f6;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        text-align: center;
    }
    
    /* Smooth animations */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes slideDown {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 2000px; }
    }
    
    .bill-card-modern {
        animation: fadeIn 0.3s ease-out;
    }
    
    /* Sticky header scroll effect */
    #sticky-header.scrolled {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    /* Collapsible items animation */
    .items-expanded {
        animation: slideDown 0.3s ease-out;
    }
    
    /* Hover effects */
    .bill-card-modern:hover {
        transform: translateY(-2px);
    }
    
    /* Touch feedback */
    button:active {
        transform: scale(0.98);
    }
    
    /* Floating button pulse */
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
    
    .fixed.bottom-6 a:hover svg {
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    /* Modal animations */
    #qrModal.show {
        display: flex !important;
        animation: fadeIn 0.2s ease-out;
    }
    
    #qrModal.show > div {
        animation: fadeIn 0.3s ease-out;
        transform: scale(1) !important;
    }
    
    /* Mobile optimizations */
    @media (max-width: 640px) {
        .bill-card-modern {
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }
        
        #sticky-header {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    
    /* Gradient overlays for better visual hierarchy */
    .bg-gradient-overlay {
        position: relative;
    }
    
    .bg-gradient-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Better focus states for accessibility */
    button:focus, a:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
    
    /* Loading state shimmer effect */
    @keyframes shimmer {
        0% { background-position: -1000px 0; }
        100% { background-position: 1000px 0; }
    }
    
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 1000px 100%;
        animation: shimmer 2s infinite;
    }
    
    /* Mobile-specific optimizations for Phase 3 */
    @media (max-width: 768px) {
        .mobile-device .modal {
            margin: 10px;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        
        .mobile-device .wallet-item {
            padding: 16px !important;
            margin-bottom: 12px;
            min-height: 60px;
            font-size: 16px;
        }
        
        .mobile-device .modal-content {
            padding: 20px;
            border-radius: 12px;
        }
        
        .mobile-device button {
            min-height: 48px;
            font-size: 16px;
            padding: 12px 20px;
        }
        
        .mobile-device .text-lg {
            font-size: 1.25rem;
        }
        
        .mobile-device .space-y-3 > * + * {
            margin-top: 1rem;
        }
        
        /* Enhanced touch targets for mobile */
        .mobile-device .wallet-item:active {
            transform: scale(0.98);
            background-color: #f3f4f6;
        }
        
        /* Mobile payment modal optimizations */
        .mobile-device #processingModal .modal-content {
            text-align: center;
            padding: 30px 20px;
        }
        
        .mobile-device .animate-spin {
            width: 48px;
            height: 48px;
            border-width: 3px;
        }
        
        /* Mobile wallet grid improvements */
        .mobile-device .wallet-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        
        .mobile-device .wallet-icon {
            width: 2.5rem;
            height: 2.5rem;
        }
        
        .mobile-device .wallet-name {
            font-size: 14px;
            font-weight: 500;
        }
    }
</style>
<script>
    console.log("javascript loading before content--");
</script>
<script>
    // Toggle items visibility
    function toggleItems(billId) {
        const itemsDiv = document.getElementById(billId + '-items');
        const icon = document.getElementById(billId + '-icon');
        
        if (itemsDiv.classList.contains('hidden')) {
            itemsDiv.classList.remove('hidden');
            itemsDiv.classList.add('items-expanded');
            icon.style.transform = 'rotate(180deg)';
        } else {
            itemsDiv.classList.add('hidden');
            itemsDiv.classList.remove('items-expanded');
            icon.style.transform = 'rotate(0deg)';
        }
    }
    
    // Sticky header scroll effect
    let lastScrollTop = 0;
    window.addEventListener('scroll', function() {
        const header = document.getElementById('sticky-header');
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
        
        lastScrollTop = scrollTop;
    });
    
    // Enhanced QR Modal
    function openQRPayment(billCode, amount) {
        const modal = document.getElementById('qrModal');
        document.getElementById('qrBillCode').textContent = billCode;
        document.getElementById('qrAmount').textContent = amount;
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
    }
    
    function closeQRModal() {
        const modal = document.getElementById('qrModal');
        modal.classList.remove('show');
        document.body.style.overflow = 'auto';
    }
    
    // Close modal on backdrop click
    document.getElementById('qrModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeQRModal();
        }
    });
    
    // Pull to refresh (mobile)
    let touchStartY = 0;
    let touchEndY = 0;
    
    document.addEventListener('touchstart', function(e) {
        touchStartY = e.touches[0].clientY;
    });
    
    document.addEventListener('touchend', function(e) {
        touchEndY = e.changedTouches[0].clientY;
        
        // If scrolled to top and pulled down more than 150px
        if (window.scrollY === 0 && touchEndY - touchStartY > 150) {
            location.reload();
        }
    });
    
    // Auto-refresh every 30 seconds (configurable)
    // Uncomment if needed:
    // setInterval(function() {
    //     location.reload();
    // }, 30000);
</script>

<!-- Include JavaScript -->
<script src="/js/momentpay-restaurant.js"></script>
<script src="/js/gastro-payment.js"></script>

<script>
     const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    const isAndroid = /Android/i.test(navigator.userAgent);
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    
    // Debug: Check function availability on page load
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Page loaded. Checking function availability...');
        console.log('Mobile device detected:', isMobile);
        console.log('Android:', isAndroid, 'iOS:', isIOS);
        console.log('hideAllModals available:', typeof hideAllModals);
        console.log('showModal available:', typeof showModal);
        console.log('closeWalletModal available:', typeof closeWalletModal);
        console.log('MomentPay available:', typeof MomentPay);
        
        // Apply mobile-specific optimizations
        if (isMobile) {
            document.body.classList.add('mobile-device');
            optimizeForMobile();
        }
    });
    
    // Initialize MomentPay
    const paymentMoment = new MomentPay();
    // Mobile optimization function
    function optimizeForMobile() {
        console.log('Applying mobile optimizations...');
        
        // Enhance modal sizes for mobile
        const modals = document.querySelectorAll('.modal');
        modals.forEach(modal => {
            modal.classList.add('mobile-optimized');
        });
        
        // Add touch-friendly enhancements
        const buttons = document.querySelectorAll('button, .wallet-option');
        buttons.forEach(button => {
            button.style.minHeight = '48px'; // Touch-friendly minimum
            button.style.padding = '12px 16px';
        });
        
        // Optimize viewport for mobile payments
        if (!document.querySelector('meta[name="viewport"]')) {
            const viewport = document.createElement('meta');
            viewport.name = 'viewport';
            viewport.content = 'width=device-width, initial-scale=1.0, user-scalable=no';
            document.head.appendChild(viewport);
        }
    }

    // Enhanced UPI deep linking with mobile app detection
    function enhancedUPIPayment(billCode, amount, walletId) {
        console.log('Starting enhanced UPI payment for mobile:', { billCode, amount, walletId, isMobile });
        
        if (!isMobile) {
            // Desktop: Use regular UPI flow
            return startUPIPayment(billCode, amount, walletId);
        }
        
        // Mobile: Enhanced UPI deep linking
        const upiApps = {
            'paytm': {
                scheme: 'paytmmp://',
                fallback: 'https://play.google.com/store/apps/details?id=net.one97.paytm',
                name: 'Paytm'
            },
            'phonepe': {
                scheme: 'phonepe://',
                fallback: 'https://play.google.com/store/apps/details?id=com.phonepe.app',
                name: 'PhonePe'
            },
            'gpay': {
                scheme: 'tez://',
                fallback: 'https://play.google.com/store/apps/details?id=com.google.android.apps.nbu.paisa.user',
                name: 'Google Pay'
            },
            'bhim': {
                scheme: 'bhim://',
                fallback: 'https://play.google.com/store/apps/details?id=in.org.npci.upiapp',
                name: 'BHIM'
            }
        };
        
        // Show mobile-optimized processing modal
        showMobileProcessingModal('Preparing UPI payment...', walletId);
        
        // Start regular UPI payment process
        startUPIPayment(billCode, amount, walletId, true); // Pass mobile flag
    }
    
    // Mobile-optimized processing modal
    function showMobileProcessingModal(message, walletId) {
        closeWalletModal();
        showModal('processingModal');
        
        const instructionsDiv = document.getElementById('paymentInstructions');
        if (instructionsDiv) {
            instructionsDiv.innerHTML = `
                <div class="flex flex-col items-center space-y-4">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                    <span class="text-lg font-medium text-gray-800">${message}</span>
                    ${isMobile ? '<p class="text-sm text-gray-600 text-center">You will be redirected to your payment app</p>' : ''}
                    <div class="mt-4">
                        <button onclick="cancelMobilePayment()" class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                            Cancel Payment
                        </button>
                    </div>
                </div>
            `;
        }
    }
     // Cancel mobile payment
    function cancelMobilePayment() {
        console.log('Mobile payment cancelled by user');
        closeProcessingModal();
        // Could show wallet selection again or handle as cancelled
    }
    
    // Wallet configurations similar to taxi demo
    const wallets = [
        { 
            id: 'AANI', 
            name: 'Aani', 
            country: ['AE'], 
            emoji: '🇦🇪', 
            image: '/images/payment/taxi_aani.jpeg', 
            type: 'qr'
        },
        { 
            id: 'ALIPAY', 
            name: 'Alipay', 
            country: ['CN'], 
            emoji: '🇨🇳', 
            image: '/images/payment/alipay.jpeg', 
            type: 'qr'
        },
        { 
            id: 'WECHAT', 
            name: 'WeChat Pay', 
            country: ['CN'], 
            emoji: '🇨🇳', 
            image: '/images/payment/taxi_wechat.jpeg', 
            type: 'qr'
        },
        { 
            id: 'SAMSUNG', 
            name: 'Samsung Pay', 
            country: ['AE', 'IN', 'CN', 'US', 'GB'], 
            emoji: '💳', 
            image: '/images/payment/samsung_pay.jpeg', 
            type: 'card'
        },
        { 
            id: 'GOOGLEPAY', 
            name: 'Google Pay', 
            country: ['AE', 'IN', 'CN', 'US', 'GB'], 
            emoji: '💳', 
            image: '/images/payment/goole_pay.png', 
            type: 'card'
        },
        { 
            id: 'APPLEPAY', 
            name: 'Apple Pay', 
            country: ['AE', 'IN', 'CN', 'US', 'GB'], 
            emoji: '🍎', 
            image: '/images/payment/apple_pay.png', 
            type: 'card'
        },
        { 
            id: 'NOL', 
            name: 'Nol Card', 
            country: ['AE'], 
            emoji: '🇦🇪', 
            image: '/images/payment/uae_nol_card.png', 
            type: 'card'
        },
        { 
            id: 'UPI', 
            name: 'UPI', 
            country: ['IN'], 
            emoji: '🇮🇳', 
            image: '/images/payment/taxi_upi.jpeg', 
            type: 'qr'
        }
    ];

     // Enhanced UPI Payment with mobile optimizations
    function startUPIPayment(billCode, amount, walletId, isMobileEnhanced = false) {
        console.log('Starting UPI payment:', { billCode, amount, walletId, isMobileEnhanced });
        
        if (isMobileEnhanced) {
            console.log('Using mobile-enhanced UPI flow');
        }
        
        // Close wallet modal and show processing with mobile optimization
        closeWalletModal();
        if (isMobile && isMobileEnhanced) {
            showMobileProcessingModal('Initiating UPI payment...', walletId);
        } else {
            showModal('processingModal');
            const instructionsDiv = document.getElementById('paymentInstructions');
            if (instructionsDiv) {
                instructionsDiv.innerHTML = '<div class="flex flex-col items-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2"></div><span class="text-base text-gray-800">Processing UPI payment...</span></div>';
            }
        }    /*UPI deep link for AED payments (like taxi demo)\n        const upiUrl = `upiGlobal://pay?ver=01&mode=01&purpose=11&orgid=MER101&tr=QR_UA_${Date.now()}_${billCode}&tn=Restaurant_Bill_${billCode}&pa=restaurant@mercury&pn=Dubai%20Fine%20Dining&mc=5812&cu=AED&mid=AEREST001&msid=S001&mtid=T001&mType=SMALL&mGr=OFFLINE&mOnboarding=AGGREGATOR&mLoc=AE&brand=Dubai%20Fine%20Dining%20LLC&cc=AE&bAm=${amount}&bCurr=AED&qrMedium=03&invoiceNo=INV${billCode}&invoiceDate=${new Date().toISOString()}&invoiceName=Dubai%20Fine%20Dining&QRexpire=${new Date(Date.now() + 24*60*60*1000).toISOString()}&QRts=${new Date().toISOString()}&sign=MEQCIDkVPLRfOwk2MS+1SZcsjXOCilBjVN5zDsgFqxuztwcwAiBB4ip17Nh80H0/Zywz430tpLnKRRyvXhUOmz45Ws73sA==`;\n        \n        console.log('UPI deep link:', upiUrl);\n        \n        // Redirect to UPI intent\n        try {\n            window.location.href = upiUrl;\n            \n            // Start checking for payment completion after UPI redirect\n            setTimeout(() => {\n                startPaymentStatusPolling('UPI', billCode, amount);\n            }, 3000);\n        } catch (error) {\n            console.error('UPI redirect failed:', error);\n            const wallet = { id: 'UPI', name: 'UPI' };\n            showPaymentFailure(wallet, 'Unable to open UPI app');\n        }\n    }\n    \n    // Payment status polling for UPI and other async payments\n    function startPaymentStatusPolling(walletType, billCode, amount) {\n        let attempts = 0;\n        const maxAttempts = 20;\n        \n        console.log('Starting payment status polling for:', walletType);\n        \n        const pollInterval = setInterval(() => {\n            attempts++;\n            console.log(`Polling payment status for ${walletType} (attempt ${attempts}/${maxAttempts})`);\n            \n            // Here you would typically check with your backend for payment status\n            // For demo purposes, we'll simulate a successful payment after a few attempts\n            if (attempts === 5) {\n                clearInterval(pollInterval);\n                const wallet = { id: walletType, name: walletType };\n                showPaymentSuccess(wallet);\n                return;\n            }\n            \n            if (attempts >= maxAttempts) {\n                clearInterval(pollInterval);\n                const wallet = { id: walletType, name: walletType };\n                showPaymentFailure(wallet, 'Payment timeout - please check your payment app');\n            }\n        }, 3000);\n*/
    }
     // State management
    let currentBill = null;
    let currentAmount = null;
    let currentPaymentType = null;
    
    // Open wallet selection modal
    function openWalletSelection(billCode, amount, paymentType) {
        currentBill = billCode;
        currentAmount = amount;
        currentPaymentType = paymentType;
        
        document.getElementById('modalBillCode').textContent = billCode;
        document.getElementById('modalAmount').textContent = amount;
        
        renderWalletGrid(paymentType);
        showModal('walletModal');
    }
    
    // Render wallet grid based on payment type
    function renderWalletGrid(paymentType) {
        const grid = document.getElementById('walletGrid');
        grid.innerHTML = '';
        grid.className = 'wallet-grid'; // Apply enhanced styling
        
        // Filter wallets based on payment type
        let filteredWallets = [];
        
        if (paymentType === 'card') {
            filteredWallets = wallets.filter(w => w.type === 'card');
            document.getElementById('modalTitle').textContent = '{{ __( "Choose Card Payment" ) }}';
        } else if (paymentType === 'qr') {
            filteredWallets = wallets.filter(w => w.type === 'qr');
            document.getElementById('modalTitle').textContent = '{{ __( "Choose QR Wallet" ) }}';
        } else if (paymentType === 'online') {
            // For online payments, show all wallets
            filteredWallets = wallets;
            document.getElementById('modalTitle').textContent = '{{ __( "Choose Online Payment" ) }}';
        }
        
        filteredWallets.forEach(wallet => {
            const button = document.createElement('div');
            button.className = 'wallet-item';
            button.onclick = () => startPaymentProcess(wallet);
            
            button.innerHTML = `
                <div class="wallet-icon">
                    <img src="${wallet.image}" alt="${wallet.name}" 
                         onerror="this.style.display='none'; this.parentElement.innerHTML='<span class=\\"text-2xl\\">${wallet.emoji}</span>';">
                </div>
                <div class="wallet-name">${wallet.name}</div>
                <div class="wallet-country">${wallet.country.join(', ')}</div>
            `;
            
            grid.appendChild(button);
        });
        
        console.log(`Rendered ${filteredWallets.length} wallets for ${paymentType} payment`);
    }
    
    // Start payment process with mobile optimizations
    function startPaymentProcess(wallet) {
        console.log('Starting payment with wallet:', wallet.name);
        console.log('Bill:', currentBill, 'Amount:', currentAmount, 'Mobile:', isMobile);
        
        // Check if UPI wallet and use mobile-enhanced flow
        if (wallet.id === 'UPI' || wallet.name.toLowerCase().includes('upi')) {
            if (isMobile) {
                enhancedUPIPayment(currentBill, currentAmount, wallet.id);
            } else {
                startUPIPayment(currentBill, currentAmount, wallet.id);
            }
            return;
        }
        
        closeWalletModal();
        
        // Use mobile-optimized modal if on mobile
        if (isMobile) {
            showMobileProcessingModal(`Processing ${wallet.name} payment...`, wallet.id);
        } else {
            showModal('processingModal');
            
            // Show appropriate instructions based on wallet type
            const instructions = document.getElementById('paymentInstructions');
            if (wallet.type === 'card' || ['SAMSUNG', 'GOOGLEPAY', 'APPLEPAY', 'NOL'].includes(wallet.id)) {
                instructions.innerHTML = `
                    <div class="flex flex-col items-center">
                        <img src="/images/payment/swap_card.png" alt="Card payment" style="height:60px;max-width:100%;margin:auto;display:block;" onerror="this.style.display='none';">
                        <span class="mt-2 text-base text-gray-800 text-center">{{ __( 'Please tap, insert or swipe your card on the payment device' ) }}</span>
                    </div>
                `;
            } else {
                instructions.innerHTML = `
                    <div class="flex flex-col items-center">
                        <img src="/images/payment/scan_qr.png" alt="QR code scan" style="height:60px;max-width:100%;margin:auto;display:block;" onerror="this.style.display='none';">
                        <span class="mt-2 text-base text-gray-800 text-center">{{ __( 'Please scan the QR code using your wallet app' ) }}</span>
                    </div>
                `;
            }
        }
        
        // Simulate payment processing
        if (['SAMSUNG', 'GOOGLEPAY', 'APPLEPAY'].includes(wallet.id)) {
            // Quick payment for contactless methods
            setTimeout(() => showPaymentSuccess(wallet), 1500);
        } else {
            // Longer processing for other methods
            sendPaymentRequest(wallet);
        }
    }
    
    // Generate processing IDs (from taxi demo)\n    function generateProcessingIds(count, length) {\n        const ids = [];\n        for (let i = 0; i < count; i++) {\n            ids.push(Math.random().toString(36).substring(2, 2 + length));\n        }\n        return ids.join(',');\n    }\n    \n    // Send payment request to backend with real API integration
    function sendPaymentRequest(wallet) {
        console.log('Starting real payment processing:', { wallet, billCode: currentBill, amount: currentAmount });
        
        // Generate transaction ID like taxi implementation
        const txnId = 'BILL-' + currentBill + '-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
        
        // Create payment request similar to taxi demo
        const paymentData = {
            wallet: wallet.id,
            billCode: currentBill,
            amount: parseFloat(currentAmount),
            currency: 'AED',
            txId: txnId,
            timestamp: new Date().toISOString()
        };
        
        console.log('Payment data prepared:', paymentData);
        
        // Send to real backend API (similar to taxi transaction_request.php)
        fetch('/api/payment-handler.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(paymentData)
        })
        .then(response => response.json())
        .then(data => {
            console.log('Payment initiation response:', data);
            
            if (data && data.success && data.status === 'initiated' && data.transaction_ref) {
                // Payment initiated successfully, start status checking (like taxi)
                console.log('Payment initiated with reference:', data.transaction_ref);
                startPaymentStatusChecking(wallet, data.transaction_ref, data.txn_type, currentAmount, currentBill);
            } else if (data && data.status === 'success') {
                // Immediate success (rare)
                console.log('Payment processed successfully immediately.');
                showPaymentSuccess(wallet, { transaction_id: data.transaction_ref || txnId });
            } else {
                // Initiation failure
                console.error('Payment initiation failed:', data);
                showPaymentFailure(wallet, data.message || 'Payment initialization failed');
            }
        })
        .catch(error => {
            console.error('Payment processing error:', error);
            showPaymentFailure(wallet, 'Connection error occurred');
        });
    }
    
    // Real payment status checking (similar to taxi checkPaymentStatus)
    function startPaymentStatusChecking(wallet, transactionRef, txnType, amount, currentBill) {
        const MAX_ATTEMPTS = 12; // Check for up to 1 minute (12 * 5 seconds)
        let attempts = 0;
        
        console.log('Starting payment status checking for:', transactionRef);
        
        function checkStatus() {
            console.log(`Checking payment status (attempt ${attempts + 1}/${MAX_ATTEMPTS})...`);
            
            fetch('/api/payment-status.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    transaction_ref: transactionRef,
                    api_base_url: txnType === 'card' ? 'http://demo.ctrmv.com:4001/api' : 'http://20.233.59.58:4000/api',
                    txn_type: txnType,
                    amount: amount
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Status check response:', data);
                console.log('printing amount', amount);
                
                if (data.status === 'success') {
                    // Payment successful
                    console.log('Payment successful!');
                    showPaymentSuccess(wallet, { transaction_id: transactionRef, amount: amount , billCode: currentBill });
                } else if (data.status === 'failed') {
                    // Payment failed
                    console.log('Payment failed:', data.message);
                    showPaymentFailure(wallet, data.message || 'Payment failed');
                } else if (attempts >= MAX_ATTEMPTS - 1) {
                    // Max attempts reached
                    console.log('Payment timed out after multiple checks');
                    showPaymentFailure(wallet, 'Payment timed out. Please try again.');
                } else {
                    // Still pending, check again after delay
                    attempts++;
                    setTimeout(checkStatus, 5000); // Check again after 5 seconds
                }
            })
            .catch(error => {
                console.error('Error checking status:', error);
                
                if (attempts >= MAX_ATTEMPTS - 1) {
                    showPaymentFailure(wallet, 'Connection error while checking payment status');
                } else {
                    attempts++;
                    setTimeout(checkStatus, 5000);
                }
            });
        }
        
        // Start checking after a brief delay
        setTimeout(checkStatus, 2000);
    }
    
    // Legacy poll function - keeping for backward compatibility but not used
    function pollPaymentStatus(transactionId, wallet, attempts = 0) {
        const maxAttempts = 20; // 20 attempts = ~60 seconds with 3s interval
        
        if (attempts >= maxAttempts) {
            showPaymentFailure(wallet, 'Payment timeout. Please check your payment app or try again.');
            return;
        }
        
        fetch('/api/payment-status.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                transaction_ref: transactionId,
                wallet: wallet.id,
                txn_type: wallet.type === 'card' ? 'CARD' : 'QR',
                amount: currentAmount
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Status check response:', data);
            
            if (data.success) {
                switch (data.status) {
                    case 'completed':
                        showPaymentSuccess(wallet, {
                            txId: transactionId,
                            ...data.data
                        });
                        break;
                        
                    case 'failed':
                        showPaymentFailure(wallet, data.message || 'Payment failed');
                        break;
                        
                    case 'cancelled':
                        closeProcessingModal();
                        break;
                        
                    default: // pending
                        // Continue polling
                        setTimeout(() => {
                            pollPaymentStatus(transactionId, wallet, attempts + 1);
                        }, 3000);
                        break;
                }
            } else {
                setTimeout(() => {
                    pollPaymentStatus(transactionId, wallet, attempts + 1);
                }, 3000);
            }
        })
        .catch(error => {
            console.error('Status check error:', error);
            setTimeout(() => {
                pollPaymentStatus(transactionId, wallet, attempts + 1);
            }, 3000);
        });
    }
    
    // MomentPay Online Payment (based on taxi demo)
    function startMomentPayOnlinePayment(billCode, amount) {
        console.log('Starting MomentPay online payment:', { billCode, amount });
        
        // Close any open modals and show processing
        closeWalletModal();
        closeProcessingModal();
        showModal('processingModal');
        
        // Update processing instructions for online payment
        const instructionsDiv = document.getElementById('paymentInstructions');
        if (instructionsDiv) {
            instructionsDiv.innerHTML = '<div class="flex flex-col items-center"><span class="text-base text-gray-800">Redirecting to MomentPay gateway...</span></div>';
        }
        
        // Generate processing IDs like taxi demo
        const processingId = generateProcessingIds(12, 10);
        const txnId = 'BILL-' + billCode + '-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
        
        // Initialize MomentPay with restaurant-specific parameters
        const params = {
            actionUrl: 'https://testapp.ariticapp.com/ma/pgprovider/iframe', // Production MomentPay URL
            patientName: 'Restaurant Customer',
            uhid: 'BILL_' + billCode,
            chargerate: parseFloat(amount),
            email: "customer@restaurant.com",
            mobileno: '971501234567',
            processingid: processingId,
            uname: "restaurant@mercury",
            paymode: "momentpay-pg", // Online payment mode
            location_id: "restaurant_payment",
            transaction_location: "restaurant_terminal",
            credentialsuser: 'restaurant',
            credentialskey: 'restaurant',
            version: 'RESTAURANT_V1',
            return_url: "",
            response_url: ""
        };
        
        console.log('MomentPay parameters:', params);
        
        // Initialize MomentPay
        paymentMoment.init(params);
        
        // Handle MomentPay response (like taxi demo)
        paymentMoment.onResponse((data) => {
            console.log("MomentPay response received:", data);
            
            try {
                const responseData = JSON.parse(data.response);
                const responseCode = responseData.status_code;
                const responseMessage = responseData.status_message;
                
                console.log("Payment responseCode:", responseCode);
                console.log("Payment responseMessage:", responseMessage);
                
                if (responseCode == 1200) {
                    // Success - like taxi demo
                    console.log('MomentPay payment successful');
                    showPaymentSuccess({ id: 'MOMENTPAY', name: 'MomentPay' }, {
                        transaction_id: responseData.transaction_id || txnId,
                        amount: amount,
                        gateway_response: responseData,
                        billCode: billCode
                    });
                } else {
                    // Failure
                    console.log('MomentPay payment failed:', responseMessage);
                    showPaymentFailure({ id: 'MOMENTPAY', name: 'MomentPay' }, responseMessage || 'Payment failed');
                }
            } catch (error) {
                console.error('Error parsing MomentPay response:', error);
                showPaymentFailure({ id: 'MOMENTPAY', name: 'MomentPay' }, 'Invalid payment response');
            }
        });
        
        // Handle MomentPay window close
        paymentMoment.onClose(() => {
            console.log("MomentPay window closed by user");
            // Return to payment selection if no response received
            setTimeout(() => {
                const processingModal = document.getElementById('processingModal');
                if (processingModal && processingModal.style.display !== 'none') {
                    closeProcessingModal();
                    // Could show payment selection again or handle as cancelled
                }
            }, 1000);
        });
    }
    
    // Show payment success
    function showPaymentSuccess(wallet, paymentData) {
        closeProcessingModal();
        console.log("printing paymentData",paymentData);
        
        
        const successDetails = document.getElementById('successDetails');
        successDetails.innerHTML = `
            <div class="text-left space-y-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __( 'Payment Method:' ) }}</span>
                    <span class="text-sm font-semibold">${wallet.name}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __( 'Bill Code:' ) }}</span>
                    <span class="text-sm font-semibold">${paymentData.billCode}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __( 'Amount:' ) }}</span>
                    <span class="text-sm font-semibold text-green-600">${paymentData.amount}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __( 'Time:' ) }}</span>
                    <span class="text-sm font-semibold">${new Date().toLocaleString()}</span>
                </div>
            </div>
        `;
        
        showModal('successModal'); // MomentPay Online Payment (based on taxi demo)
    }
    
    // Show payment failure
    function showPaymentFailure(wallet, reason) {
        closeProcessingModal();
        document.getElementById('failureReason').textContent = reason;
        showModal('failedModal');
    }
    
    // Utility function to hide all modals
    function hideAllModals() {
        closeWalletModal();
        closeProcessingModal();
        closeSuccessModal();
        closeFailedModal();
    }
    
    // Modal management functions with enhanced visibility handling
    function showModal(modalId) {
        console.log('Showing modal:', modalId);
        const modal = document.getElementById(modalId);
        if (modal) {
            // Reset any previous styles
            modal.style.display = 'flex';
            modal.classList.remove('hidden');
            
            // Add show class for animations
            setTimeout(() => {
                modal.classList.add('show');
                const content = modal.querySelector('div > div');
                if (content) {
                    content.classList.remove('entering');
                }
            }, 10);
            
            // Prevent body scroll
            document.body.style.overflow = 'hidden';
            document.body.style.paddingRight = '0px'; // Prevent scroll jump
        }
    }
    
    function closeWalletModal() {
        console.log('Closing wallet modal');
        const modal = document.getElementById('walletModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '';
        }
    }
    
    function closeProcessingModal() {
        console.log('Closing processing modal');
        const modal = document.getElementById('processingModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '';
        }
    }
    
    function closeSuccessModal() {
        console.log('Closing success modal');
        const modal = document.getElementById('successModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '';
        }
    }
    
    function closeFailedModal() {
        console.log('Closing failed modal');
        const modal = document.getElementById('failedModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '';
        }
    }
    
    function cancelPayment() {
        closeProcessingModal();
    }
    
    function retryPayment() {
        closeFailedModal();
        if (currentBill && currentAmount && currentPaymentType) {
            openWalletSelection(currentBill, currentAmount, currentPaymentType);
        }
    }
    
    function refreshPage() {
        location.reload();
    }
    
    // Close modals on backdrop click with enhanced detection
    document.addEventListener('click', function(e) {
        // Check if click is on the modal backdrop (not the content)
        const target = e.target;
        
        if (target.id === 'walletModal' || target.classList.contains('modal-overlay')) {
            closeWalletModal();
        } else if (target.id === 'processingModal') {
            // Don't close processing modal on backdrop click for security
            // closeProcessingModal();
        } else if (target.id === 'successModal') {
            closeSuccessModal();
        } else if (target.id === 'failedModal') {
            closeFailedModal();
        }
    });
    
    // Enhanced escape key handling
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            // Close any open modals
            if (document.getElementById('walletModal').style.display === 'flex') {
                closeWalletModal();
            } else if (document.getElementById('successModal').style.display === 'flex') {
                closeSuccessModal();
            } else if (document.getElementById('failedModal').style.display === 'flex') {
                closeFailedModal();
            }
            // Don't close processing modal with escape for security
        }
    });
    
    // Legacy function support (if needed)
    function openQRPayment(billCode, amount) {
        openWalletSelection(billCode, amount, 'qr');
    }
    
    function openCardPayment(billCode, amount) {
        openWalletSelection(billCode, amount, 'card');
    }
    
    function closeQRModal() {
        closeWalletModal();
    }

</script>

@endsection