@extends('layout.base')

@section('layout.base.header')
<div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <div class="bg-white bg-opacity-20 p-3 rounded-full">
            <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 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 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 2"></path>
            </svg>
        </div>
        <div>
            <h3 class="text-3xl font-bold">
                {{ __( 'Table Bill - :table', [ 'table' => $table->area ? $table->area->name . ' - ' . $table->name : $table->name ] ) }}
            </h3>
            <p class="text-blue-100 flex items-center space-x-2">
                <svg class="w-4 h-4" 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>
                        <span>{{ __( 'Secure table access' ) }}</span>
                    @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>
                        <span>{{ __( 'Public table access' ) }}</span>
                    @endif
                </svg>
            </p>
        </div>
    </div>
</div>
@endsection

@section('layout.base.body')
<div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 py-8">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
                <!-- Table Information -->\n        <div class=\"bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-8 backdrop-blur-sm bg-opacity-95 table-info-card\">\n            <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center space-x-4\">\n                    <div class=\"bg-gradient-to-r from-blue-500 to-purple-500 p-4 rounded-xl text-white\">\n                        <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"></path>\n                        </svg>\n                    </div>\n                    <div>\n                        <h2 class=\"text-2xl font-bold text-gray-900 mb-1\">\n                            {{ $table->name }}\n                        </h2>\n                        @if( $table->area )\n                            <div class=\"flex items-center space-x-2 text-gray-600\">\n                                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"></path>\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"></path>\n                                </svg>\n                                <span class=\"font-medium\">{{ $table->area->name }}</span>\n                            </div>\n                        @endif\n                    </div>\n                </div>\n                <div class=\"text-right bg-gray-50 rounded-lg p-4\">\n                    <div class=\"flex items-center space-x-2 text-sm text-gray-500 mb-1\">\n                        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <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>\n                        </svg>\n                        <span>{{ __( 'Last updated' ) }}</span>\n                    </div>\n                    <p class=\"text-sm font-semibold text-gray-900\">{{ now()->format('M d, Y H:i') }}</p>\n                </div>\n            </div>\n        </div>

        <!-- Bills List -->
        @if( isset($bills) && count($bills) > 0 )
            <div class="space-y-6">
                                @foreach( $bills as $index => $bill )\n                    <div class=\"bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden backdrop-blur-sm bg-opacity-95 hover:shadow-2xl transition-all duration-300 bill-card\">\n                        <!-- Bill Header -->\n                        <div class=\"px-6 py-5 bg-gradient-to-r from-gray-50 to-blue-50 border-b border-gray-200\">\n                            <div class=\"flex items-center justify-between\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"bg-gradient-to-r from-green-400 to-blue-500 p-3 rounded-full text-white\">\n                                        <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                            <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>\n                                        </svg>\n                                    </div>\n                                    <div>\n                                        <h3 class=\"text-xl font-bold text-gray-900\">\n                                            {{ __( 'Bill #:code', [ 'code' => $bill['code'] ] ) }}\n                                        </h3>
                                    @if( isset($bill['customer']) && $bill['customer'] )
                                        <p class="text-gray-600">
                                            {{ __( 'Customer: :name', [ 'name' => $bill['customer']['name'] ] ) }}
                                        </p>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <div class="flex items-center space-x-2">
                                        @if( $bill['payment_status'] === 'paid' )
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                {{ __( 'Paid' ) }}
                                            </span>
                                        @elseif( $bill['payment_status'] === 'partially_paid' )
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                {{ __( 'Partially Paid' ) }}
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                {{ __( 'Unpaid' ) }}
                                            </span>
                                        @endif
                                    </div>
                                    <p class="text-2xl font-bold text-gray-900 mt-1">
                                        {{ ns()->currency->define( $bill['totals']['total'] ) }}
                                    </p>
                                    @if( isset($bill['remaining_amount']) && $bill['remaining_amount'] > 0 )
                                        <p class="text-sm text-red-600">
                                            {{ __( 'Remaining: :amount', [ 'amount' => ns()->currency->define( $bill['remaining_amount'] ) ] ) }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Bill Details -->
                        <div class="px-6 py-4">
                            <!-- Order Products -->
                            @if( isset($bill['products']) && count($bill['products']) > 0 )
                                <div class="mb-6">
                                    <h4 class="text-md font-semibold text-gray-900 mb-3">{{ __( 'Items' ) }}</h4>
                                    <div class="overflow-x-auto">
                                        <table class="w-full">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                        {{ __( 'Item' ) }}
                                                    </th>
                                                    <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                        {{ __( 'Qty' ) }}
                                                    </th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                        {{ __( 'Unit Price' ) }}
                                                    </th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                        {{ __( 'Total' ) }}
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-200">
                                                @foreach( $bill['products'] as $product )
                                                    <tr>
                                                        <td class="px-4 py-3 text-sm text-gray-900">
                                                            {{ $product['name'] }}
                                                        </td>
                                                        <td class="px-4 py-3 text-sm text-gray-500 text-center">
                                                            {{ $product['quantity'] }}
                                                        </td>
                                                        <td class="px-4 py-3 text-sm text-gray-500 text-right">
                                                            {{ ns()->currency->define( $product['unit_price'] ) }}
                                                        </td>
                                                        <td class="px-4 py-3 text-sm text-gray-900 text-right">
                                                            {{ ns()->currency->define( $product['total_price'] ) }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif

                            <!-- Bill Totals -->
                            @if( isset($bill['totals']) )
                                <div class="border-t border-gray-200 pt-4">
                                    <div class="flex justify-end">
                                        <div class="w-64">
                                            <div class="flex justify-between py-1">
                                                <span class="text-sm text-gray-600">{{ __( 'Subtotal' ) }}:</span>
                                                <span class="text-sm text-gray-900">{{ ns()->currency->define( $bill['totals']['subtotal'] ) }}</span>
                                            </div>
                                            @if( $bill['totals']['tax_value'] > 0 )
                                                <div class="flex justify-between py-1">
                                                    <span class="text-sm text-gray-600">{{ __( 'Tax' ) }}:</span>
                                                    <span class="text-sm text-gray-900">{{ ns()->currency->define( $bill['totals']['tax_value'] ) }}</span>
                                                </div>
                                            @endif
                                            @if( $bill['totals']['discount'] > 0 )
                                                <div class="flex justify-between py-1">
                                                    <span class="text-sm text-gray-600">{{ __( 'Discount' ) }}:</span>
                                                    <span class="text-sm text-red-600">-{{ ns()->currency->define( $bill['totals']['discount'] ) }}</span>
                                                </div>
                                            @endif
                                            @if( isset($bill['totals']['shipping']) && $bill['totals']['shipping'] > 0 )
                                                <div class="flex justify-between py-1">
                                                    <span class="text-sm text-gray-600">{{ __( 'Shipping' ) }}:</span>
                                                    <span class="text-sm text-gray-900">{{ ns()->currency->define( $bill['totals']['shipping'] ) }}</span>
                                                </div>
                                            @endif
                                            <div class="flex justify-between py-1 border-t border-gray-200 font-semibold">
                                                <span class="text-sm text-gray-900">{{ __( 'Total' ) }}:</span>
                                                <span class="text-sm text-gray-900">{{ ns()->currency->define( $bill['totals']['total'] ) }}</span>
                                            </div>
                                            @if( isset($bill['totals']['tendered']) && $bill['totals']['tendered'] > 0 )
                                                <div class="flex justify-between py-1">
                                                    <span class="text-sm text-gray-600">{{ __( 'Paid' ) }}:</span>
                                                    <span class="text-sm text-green-600">{{ ns()->currency->define( $bill['totals']['tendered'] ) }}</span>
                                                </div>
                                            @endif
                                            @if( isset($bill['remaining_amount']) && $bill['remaining_amount'] > 0 )
                                                <div class="flex justify-between py-1 border-t border-gray-200">
                                                    <span class="text-sm font-semibold text-gray-900">{{ __( 'Remaining' ) }}:</span>
                                                    <span class="text-sm font-semibold text-red-600">{{ ns()->currency->define( $bill['remaining_amount'] ) }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Action Buttons -->
                            @if( isset($bill['can_pay']) && $bill['can_pay'] && isset($bill['remaining_amount']) && $bill['remaining_amount'] > 0 )
                                <div class="mt-6 bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl p-6 border border-gray-100">
                                    <div class="text-center mb-4">
                                        <h4 class="text-lg font-semibold text-gray-900 mb-2">{{ __( 'Choose Payment Method' ) }}</h4>
                                        <div class="inline-flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-200">
                                            <svg class="w-5 h-5 text-green-500" 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-1"></path>
                                            </svg>
                                            <span class="font-bold text-xl bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
                                                {{ ns()->currency->define( $bill['remaining_amount'] ) }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- Payment Options -->
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                        <!-- QR Payment Button -->
                                                                                <!-- QR Payment Button -->\n                                        <button \n                                            data-payment-action=\"pay\"\n                                            data-order-id=\"{{ $bill['id'] }}\"\n                                            data-amount=\"{{ $bill['remaining_amount'] }}\"\n                                            data-payment-type=\"qr\"\n                                            class=\"group relative bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300 payment-button\"\n                                        >\n                                            <div class=\"flex flex-col items-center space-y-2\">\n                                                <div class=\"bg-white bg-opacity-20 p-3 rounded-full\">\n                                                    <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M12 12h.01M12 12v.01\"></path>\n                                                    </svg>\n                                                </div>\n                                                <div class=\"text-center\">\n                                                    <div class=\"text-lg font-bold\">{{ __( 'QR / Wallets' ) }}</div>\n                                                    <div class=\"text-sm text-purple-100\">{{ __( 'UPI, Aani, Alipay, WeChat' ) }}</div>\n                                                </div>\n                                            </div>\n                                        </button>\n                                        \n                                        <!-- Card Payment Button -->\n                                        <button \n                                            data-payment-action=\"pay\"\n                                            data-order-id=\"{{ $bill['id'] }}\"\n                                            data-amount=\"{{ $bill['remaining_amount'] }}\"\n                                            data-payment-type=\"card\"\n                                            class=\"group relative bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 payment-button\"\n                                        >\n                                            <div class=\"flex flex-col items-center space-y-2\">\n                                                <div class=\"bg-white bg-opacity-20 p-3 rounded-full\">\n                                                    <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                        <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>\n                                                    </svg>\n                                                </div>\n                                                <div class=\"text-center\">\n                                                    <div class=\"text-lg font-bold\">{{ __( 'Card' ) }}</div>\n                                                    <div class=\"text-sm text-blue-100\">{{ __( 'Pay using taxi device' ) }}</div>\n                                                </div>\n                                            </div>\n                                        </button>
                                        
                                        <!-- Card Payment Button -->
                                        <button 
                                            data-payment-action="pay"
                                            data-order-id="{{ $bill['id'] }}"
                                            data-amount="{{ $bill['remaining_amount'] }}"
                                            data-payment-type="card"
                                            class="group relative bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300"
                                        >
                                            <div class="flex flex-col items-center space-y-2">
                                                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                                                    <svg class="w-8 h-8" 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>
                                                <div class="text-center">
                                                    <div class="text-lg font-bold">{{ __( 'Card' ) }}</div>
                                                    <div class="text-sm text-blue-100">{{ __( 'Pay using taxi device' ) }}</div>
                                                </div>
                                            </div>
                                        </button>
                                    </div>
                                    
                                    <div class="text-center text-sm text-gray-600">
                                        {{ __( 'Amount to pay: :amount', [ 'amount' => ns()->currency->define( $bill['remaining_amount'] ) ] ) }}
                                    </div>

                                    <!-- Split Bill -->
                                    @if( isset($bill['supports_split']) && $bill['supports_split'] )
                                        <div class="mt-4 pt-4 border-t border-gray-200">
                                            <button 
                                                onclick="openSplitBillModal({{ $bill['id'] }})"
                                                class="w-full inline-flex items-center justify-center px-6 py-3 border-2 border-dashed border-gray-300 text-base font-medium rounded-xl text-gray-600 bg-white hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
                                            >
                                                <svg class="-ml-1 mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                                </svg>
                                                {{ __( 'Split Bill' ) }}
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-12 text-center backdrop-blur-sm bg-opacity-95">
                <div class="bg-gradient-to-r from-gray-100 to-blue-100 p-6 rounded-full w-24 h-24 mx-auto mb-6 flex items-center justify-center">
                    <svg class="h-12 w-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 text-lg max-w-md mx-auto">
                    @if( isset($message) )
                        {{ $message }}
                    @else
                        {{ __( 'There are no active bills for this table.' ) }}
                    @endif
                </p>
            </div>
        @endif

                <!-- Refresh Button -->\n        <div class=\"mt-8 text-center\">\n            <button \n                onclick=\"location.reload()\"\n                class=\"inline-flex items-center px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-gray-300 refresh-button\"\n            >\n                <svg class=\"-ml-1 mr-3 h-5 w-5 refresh-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" id=\"refresh-icon\">\n                    <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>\n                </svg>\n                {{ __( 'Refresh Bills' ) }}\n            </button>\n        </div>
        </div>\n</div>\n\n<!-- Enhanced Styling -->\n<link rel=\"stylesheet\" href=\"{{ asset('css/gastro-payment.css') }}\">\n\n<!-- Payment JavaScript -->\n<script src=\"{{ asset('js/gastro-payment.js') }}\"></script>

<script>
// Legacy functions for backward compatibility
function payBill(orderId, amount, type) {
    // This function is now handled by the GastroPaymentHandler
    console.log('Legacy payBill function called, payment handled by new system');
}

function openSplitBillModal(orderId) {
    // Split bill functionality placeholder
    alert('{{ __( "Split bill functionality will be implemented here" ) }}');
}

// Initialize payment handler with configuration
document.addEventListener('DOMContentLoaded', function() {
    if (window.gastroPayment) {
        // Payment handler is already initialized
        console.log('Gastro payment system initialized');
    }
});
</script>

@endsection