@extends('admin.layouts.app')

@section('title', 'Point of Sale')

@section('content')
<div class="h-screen flex flex-col bg-gradient-to-br from-blue-50 to-indigo-100">
    <!-- POS Header -->
    <div class="bg-white/95 backdrop-blur-sm border-b border-gray-200 px-6 py-4 shadow-sm">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="p-2 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg">
                    <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                    </svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Point of Sale</h1>
                    <p class="text-sm text-gray-600">Manage sales and transactions</p>
                </div>
            </div>
            <div class="flex items-center space-x-6">
                <div class="text-center">
                    <div class="text-sm text-gray-600">Cashier</div>
                    <div class="font-semibold text-gray-900">{{ auth()->user()->name }}</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-600">Date</div>
                    <div class="font-semibold text-gray-900">{{ date('M d, Y') }}</div>
                </div>
                <div class="text-center">
                    <div class="text-sm text-gray-600">Time</div>
                    <div class="font-semibold text-gray-900" id="current-time">{{ date('H:i:s') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
        <!-- Left Panel - Products -->
        <div class="w-2/3 flex flex-col border-r border-gray-200/50">
            <!-- Search and Categories -->
            <div class="bg-white/95 backdrop-blur-sm border-b border-gray-200/50 p-6 shadow-sm">
                <div class="flex flex-col sm:flex-row gap-4">
                    <div class="flex-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <input type="text" id="product-search" placeholder="Search products by name, SKU..."
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm">
                    </div>
                    <div class="sm:w-64">
                        <select id="category-filter" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm bg-white">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex gap-2">
                        <button id="grid-view" class="p-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all shadow-sm">
                            <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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                            </svg>
                        </button>
                        <button id="list-view" class="p-3 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 transition-all shadow-sm">
                            <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 6h16M4 10h16M4 14h16M4 18h16"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Products Grid/List -->
            <div class="flex-1 overflow-y-auto p-6">
                <div id="products-loading" class="hidden text-center py-8">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <p class="mt-2 text-gray-600">Loading products...</p>
                </div>

                <div id="products-grid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    @foreach($products as $product)
                        <div class="product-card bg-white border border-gray-200 rounded-2xl p-4 hover:shadow-xl hover:border-blue-300 transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
                             data-product-id="{{ $product->id }}"
                             data-product-name="{{ $product->name }}"
                             data-product-price="{{ $product->price }}"
                             data-product-sale-price="{{ $product->sale_price }}"
                             data-product-image="{{ $product->images ? asset('storage/' . $product->images[0]) : '' }}"
                             data-product-sku="{{ $product->sku }}"
                             data-stock-quantity="{{ $product->stock_quantity }}">
                            <div class="relative aspect-square mb-4 overflow-hidden rounded-xl bg-gray-100">
                                @if($product->images)
                                    <img src="{{ asset('storage/' . $product->images[0]) }}" alt="{{ $product->name }}"
                                         class="w-full h-full object-cover transition-transform duration-300 hover:scale-110">
                                @else
                                    <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 rounded-xl flex items-center justify-center">
                                        <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                @endif
                                @if($product->sale_price)
                                    <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                                        SALE
                                    </div>
                                @endif
                                @if($product->stock_quantity <= 5)
                                    <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                                        LOW STOCK
                                    </div>
                                @endif
                            </div>
                            <div class="space-y-2">
                                <h3 class="font-semibold text-gray-900 text-sm leading-tight line-clamp-2">{{ $product->name }}</h3>
                                <p class="text-xs text-gray-500 font-medium">{{ $product->sku }}</p>
                                <div class="flex justify-between items-center">
                                    <div class="flex flex-col">
                                        @if($product->sale_price)
                                            <span class="text-lg font-bold text-red-600">${{ number_format($product->sale_price, 2) }}</span>
                                            <span class="text-xs text-gray-400 line-through">${{ number_format($product->price, 2) }}</span>
                                        @else
                                            <span class="text-lg font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                                        @endif
                                    </div>
                                    <div class="text-right">
                                        <div class="text-xs text-gray-500">Stock</div>
                                        <div class="font-semibold {{ $product->stock_quantity <= 5 ? 'text-red-600' : 'text-green-600' }}">
                                            {{ $product->stock_quantity }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Products List View (Hidden by default) -->
                <div id="products-list" class="hidden space-y-3">
                    @foreach($products as $product)
                        <div class="product-card bg-white border border-gray-200 rounded-xl p-4 hover:shadow-lg hover:border-blue-300 transition-all duration-300 cursor-pointer"
                             data-product-id="{{ $product->id }}"
                             data-product-name="{{ $product->name }}"
                             data-product-price="{{ $product->price }}"
                             data-product-sale-price="{{ $product->sale_price }}"
                             data-product-image="{{ $product->images ? asset('storage/' . $product->images[0]) : '' }}"
                             data-product-sku="{{ $product->sku }}"
                             data-stock-quantity="{{ $product->stock_quantity }}">
                            <div class="flex items-center space-x-4">
                                <div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
                                    @if($product->images)
                                        <img src="{{ asset('storage/' . $product->images[0]) }}" alt="{{ $product->name }}"
                                             class="w-full h-full object-cover">
                                    @else
                                        <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-semibold text-gray-900 truncate">{{ $product->name }}</h3>
                                    <p class="text-sm text-gray-500">{{ $product->sku }}</p>
                                </div>
                                <div class="flex items-center space-x-4">
                                    @if($product->sale_price)
                                        <div class="text-right">
                                            <span class="text-lg font-bold text-red-600">${{ number_format($product->sale_price, 2) }}</span>
                                            <div class="text-xs text-gray-400 line-through">${{ number_format($product->price, 2) }}</div>
                                        </div>
                                    @else
                                        <span class="text-lg font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                                    @endif
                                    <div class="text-right">
                                        <div class="text-xs text-gray-500">Stock</div>
                                        <div class="font-semibold {{ $product->stock_quantity <= 5 ? 'text-red-600' : 'text-green-600' }}">
                                            {{ $product->stock_quantity }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Load More Button -->
                <div class="text-center mt-8">
                    <button id="load-more-products" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <svg class="w-5 h-5 inline mr-2" 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>
                        Load More Products
                    </button>
                </div>
            </div>
        </div>

        <!-- Right Panel - Cart & Payment -->
        <div class="w-1/3 flex flex-col bg-gradient-to-b from-white to-gray-50">
            <!-- Cart Header -->
            <div class="bg-white/95 backdrop-blur-sm border-b border-gray-200/50 px-6 py-4 shadow-sm">
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-3">
                        <div class="p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg">
                            <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 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13v8a2 2 0 002 2h10a2 2 0 002-2v-3"></path>
                            </svg>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Current Order</h2>
                            <p class="text-sm text-gray-600" id="cart-item-count">0 items</p>
                        </div>
                    </div>
                    <button id="clear-cart" class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors" title="Clear Cart">
                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Cart Items -->
            <div id="cart-items" class="flex-1 overflow-y-auto p-6 space-y-4">
                <!-- Cart items will be loaded here via JavaScript -->
                <div class="text-center text-gray-500 py-12">
                    <div class="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13v8a2 2 0 002 2h10a2 2 0 002-2v-3" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Your cart is empty</h3>
                    <p class="text-gray-600">Add products from the left panel to start selling</p>
                </div>
            </div>

            <!-- Cart Footer / Payment -->
            <div class="bg-white/95 backdrop-blur-sm border-t border-gray-200/50 p-6">
                <div id="cart-summary" class="hidden">
                    <!-- Cart summary will be shown here -->
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 mb-6">
                        <div class="space-y-3">
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-600">Subtotal:</span>
                                <span id="cart-subtotal" class="font-semibold text-gray-900">$0.00</span>
                            </div>
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-600">Tax (8%):</span>
                                <span id="cart-tax" class="font-semibold text-gray-900">$0.00</span>
                            </div>
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-600">Discount:</span>
                                <span id="cart-discount" class="font-semibold text-green-600">-$0.00</span>
                            </div>
                            <div class="border-t border-gray-300 pt-3">
                                <div class="flex justify-between items-center text-lg font-bold">
                                    <span class="text-gray-900">Total:</span>
                                    <span id="cart-total" class="text-blue-600">$0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Form -->
                    <form id="payment-form" class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                                <select name="payment_method" id="payment-method" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
                                    <option value="cash">💵 Cash</option>
                                    <option value="card">💳 Card</option>
                                    <option value="bank_transfer">🏦 Bank Transfer</option>
                                    <option value="digital_wallet">📱 Digital Wallet</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Amount Paid</label>
                                <input type="number" name="amount_paid" id="amount-paid" step="0.01" min="0"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="0.00">
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Customer Name</label>
                                <input type="text" name="customer_name" id="customer-name"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="Enter name">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                <input type="tel" name="customer_phone" id="customer-phone"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="Enter phone">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email (Optional)</label>
                            <input type="email" name="customer_email" id="customer-email"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   placeholder="customer@example.com">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                            <textarea name="notes" id="order-notes" rows="2"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                                      placeholder="Add any special notes..."></textarea>
                        </div>

                        <!-- Change Amount Display -->
                        <div id="change-display" class="hidden bg-green-50 border border-green-200 rounded-lg p-3">
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-green-700 font-medium">Change:</span>
                                <span id="change-amount" class="font-bold text-green-700">$0.00</span>
                            </div>
                        </div>

                        <button type="submit" id="process-payment"
                                class="w-full bg-gradient-to-r from-green-600 to-emerald-600 text-white py-3 px-4 rounded-xl hover:from-green-700 hover:to-emerald-700 transition-all font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                            <span class="flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Process Payment
                            </span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product Quick Add Modal -->
<div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm overflow-y-auto h-full w-full hidden z-50 flex items-center justify-center">
    <div class="relative mx-auto p-6 border w-full max-w-md shadow-2xl rounded-2xl bg-white transform transition-all">
        <div class="space-y-6">
            <!-- Modal Header -->
            <div class="flex items-start justify-between">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 rounded-xl overflow-hidden bg-gray-100 flex-shrink-0" id="modal-product-image">
                        <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900" id="modal-product-name">Product Name</h3>
                        <p class="text-sm text-gray-500" id="modal-product-sku">SKU: PROD-001</p>
                        <div class="mt-2">
                            <span class="text-2xl font-bold text-gray-900" id="modal-product-price">$0.00</span>
                            <span class="text-sm text-gray-500 ml-2" id="modal-stock-info">Stock: 0</span>
                        </div>
                    </div>
                </div>
                <button id="close-modal" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                    <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" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- Product Details -->
            <div class="bg-gray-50 rounded-xl p-4">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-600">Category:</span>
                        <span class="font-medium text-gray-900 ml-2" id="modal-product-category">N/A</span>
                    </div>
                    <div>
                        <span class="text-gray-600">Brand:</span>
                        <span class="font-medium text-gray-900 ml-2" id="modal-product-brand">N/A</span>
                    </div>
                </div>
            </div>

            <!-- Quantity and Variants -->
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Quantity</label>
                    <div class="flex items-center space-x-3">
                        <button id="decrease-qty" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                            </svg>
                        </button>
                        <input type="number" id="modal-quantity" value="1" min="1" max="999"
                               class="w-20 text-center px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent font-semibold">
                        <button id="increase-qty" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                        <span class="text-sm text-gray-500 ml-2" id="max-stock-info">Max: 999</span>
                    </div>
                </div>

                <div id="color-selection" class="hidden">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Color</label>
                    <select id="modal-color" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
                        <option value="">Select Color</option>
                    </select>
                </div>

                <div id="size-selection" class="hidden">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Size</label>
                    <select id="modal-size" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
                        <option value="">Select Size</option>
                    </select>
                </div>
            </div>

            <!-- Total and Actions -->
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4">
                <div class="flex justify-between items-center mb-4">
                    <span class="text-lg font-semibold text-gray-700">Total:</span>
                    <span class="text-2xl font-bold text-blue-600" id="modal-total">$0.00</span>
                </div>
                <div class="flex space-x-3">
                    <button id="cancel-add" class="flex-1 px-4 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors font-medium">
                        Cancel
                    </button>
                    <button id="confirm-add" class="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <span class="flex items-center justify-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13v8a2 2 0 002 2h10a2 2 0 002-2v-3"></path>
                            </svg>
                            Add to Cart
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let currentProduct = null;
let cart = {};

// Route URLs
const routes = {
    addToCart: '{{ route("pos.add-to-cart") }}',
    getCart: '{{ route("pos.cart") }}',
    updateCartItem: '{{ route("pos.update-cart-item") }}',
    removeFromCart: '{{ route("pos.remove-from-cart") }}',
    clearCart: '{{ route("pos.clear-cart") }}',
    processPayment: '{{ route("pos.process-payment") }}',
    searchProducts: '{{ route("pos.search") }}'
};

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    loadCart();
    setupEventListeners();
    updateClock();
    setInterval(updateClock, 1000);
});

function setupEventListeners() {
    // Product search
    document.getElementById('product-search').addEventListener('input', debounce(searchProducts, 300));

    // Category filter
    document.getElementById('category-filter').addEventListener('change', filterProducts);

    // View toggles
    document.getElementById('grid-view').addEventListener('click', function() {
        switchToGridView();
    });
    document.getElementById('list-view').addEventListener('click', function() {
        switchToListView();
    });

    // Product card clicks
    document.getElementById('products-grid').addEventListener('click', function(e) {
        const productCard = e.target.closest('.product-card');
        if (productCard) {
            openProductModal(productCard);
        }
    });
    document.getElementById('products-list').addEventListener('click', function(e) {
        const productCard = e.target.closest('.product-card');
        if (productCard) {
            openProductModal(productCard);
        }
    });

    // Modal events
    document.getElementById('close-modal').addEventListener('click', closeProductModal);
    document.getElementById('cancel-add').addEventListener('click', closeProductModal);
    document.getElementById('confirm-add').addEventListener('click', addToCart);

    // Quantity controls in modal
    document.getElementById('decrease-qty').addEventListener('click', function() {
        const qtyInput = document.getElementById('modal-quantity');
        const currentValue = parseInt(qtyInput.value);
        if (currentValue > 1) {
            qtyInput.value = currentValue - 1;
            updateModalTotal();
        }
    });
    document.getElementById('increase-qty').addEventListener('click', function() {
        const qtyInput = document.getElementById('modal-quantity');
        const currentValue = parseInt(qtyInput.value);
        const maxStock = parseInt(qtyInput.max);
        if (currentValue < maxStock) {
            qtyInput.value = currentValue + 1;
            updateModalTotal();
        }
    });
    document.getElementById('modal-quantity').addEventListener('input', updateModalTotal);

    // Cart events
    document.getElementById('clear-cart').addEventListener('click', clearCart);

    // Payment form
    document.getElementById('payment-form').addEventListener('submit', processPayment);
    document.getElementById('amount-paid').addEventListener('input', calculateChange);

    // Load more products
    document.getElementById('load-more-products').addEventListener('click', loadMoreProducts);

    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // ESC to close modal
        if (e.key === 'Escape' && !document.getElementById('product-modal').classList.contains('hidden')) {
            closeProductModal();
        }
        // F2 for search focus
        if (e.key === 'F2') {
            e.preventDefault();
            document.getElementById('product-search').focus();
        }
    });
}

function updateClock() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('en-US', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
    document.getElementById('current-time').textContent = timeString;
}

function switchToGridView() {
    document.getElementById('products-grid').classList.remove('hidden');
    document.getElementById('products-list').classList.add('hidden');
    document.getElementById('grid-view').classList.add('bg-blue-600', 'text-white');
    document.getElementById('grid-view').classList.remove('bg-gray-100', 'text-gray-600');
    document.getElementById('list-view').classList.remove('bg-blue-600', 'text-white');
    document.getElementById('list-view').classList.add('bg-gray-100', 'text-gray-600');
}

function switchToListView() {
    document.getElementById('products-list').classList.remove('hidden');
    document.getElementById('products-grid').classList.add('hidden');
    document.getElementById('list-view').classList.add('bg-blue-600', 'text-white');
    document.getElementById('list-view').classList.remove('bg-gray-100', 'text-gray-600');
    document.getElementById('grid-view').classList.remove('bg-blue-600', 'text-white');
    document.getElementById('grid-view').classList.add('bg-gray-100', 'text-gray-600');
}

function calculateChange() {
    const amountPaid = parseFloat(document.getElementById('amount-paid').value) || 0;
    const total = parseFloat(document.getElementById('cart-total').textContent.replace('$', '')) || 0;
    const change = amountPaid - total;

    const changeDisplay = document.getElementById('change-display');
    const changeAmount = document.getElementById('change-amount');

    if (amountPaid > 0 && change >= 0) {
        changeAmount.textContent = `$${change.toFixed(2)}`;
        changeDisplay.classList.remove('hidden');
    } else {
        changeDisplay.classList.add('hidden');
    }
}

function updateModalTotal() {
    const quantity = parseInt(document.getElementById('modal-quantity').value) || 1;
    const price = parseFloat(currentProduct.salePrice || currentProduct.price);
    const total = quantity * price;
    document.getElementById('modal-total').textContent = `$${total.toFixed(2)}`;
}

function openProductModal(productCard) {
    currentProduct = {
        id: productCard.dataset.productId,
        name: productCard.dataset.productName,
        price: productCard.dataset.productPrice,
        salePrice: productCard.dataset.productSalePrice,
        image: productCard.dataset.productImage,
        sku: productCard.dataset.productSku,
        stockQuantity: productCard.dataset.stockQuantity
    };

    // Update modal content
    document.getElementById('modal-product-name').textContent = currentProduct.name;
    document.getElementById('modal-product-sku').textContent = `SKU: ${currentProduct.sku}`;
    document.getElementById('modal-product-price').textContent = `$${parseFloat(currentProduct.salePrice || currentProduct.price).toFixed(2)}`;
    document.getElementById('modal-stock-info').textContent = `Stock: ${currentProduct.stockQuantity}`;

    // Update product image
    const imageContainer = document.getElementById('modal-product-image');
    if (currentProduct.image) {
        imageContainer.innerHTML = `<img src="${currentProduct.image}" alt="${currentProduct.name}" class="w-full h-full object-cover">`;
    } else {
        imageContainer.innerHTML = `
            <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
        `;
    }

    // Set quantity controls
    const qtyInput = document.getElementById('modal-quantity');
    qtyInput.value = 1;
    qtyInput.max = currentProduct.stockQuantity;
    document.getElementById('max-stock-info').textContent = `Max: ${currentProduct.stockQuantity}`;

    // Update total
    updateModalTotal();

    // Load colors and sizes if available
    loadProductVariants(currentProduct.id);

    document.getElementById('product-modal').classList.remove('hidden');
}

function closeProductModal() {
    document.getElementById('product-modal').classList.add('hidden');
    currentProduct = null;
}

function loadProductVariants(productId) {
    // This would load colors and sizes for the product
    // For now, we'll hide the selection fields
    document.getElementById('color-selection').classList.add('hidden');
    document.getElementById('size-selection').classList.add('hidden');
}

function addToCart() {
    const quantity = parseInt(document.getElementById('modal-quantity').value);
    const colorId = document.getElementById('modal-color').value;
    const sizeId = document.getElementById('modal-size').value;

    if (!currentProduct || quantity <= 0) return;

    fetch(routes.addToCart, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            product_id: currentProduct.id,
            quantity: quantity,
            color_id: colorId || null,
            size_id: sizeId || null
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeProductModal();
            loadCart();
            showNotification(data.message, 'success');
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('An error occurred', 'error');
    });
}

function loadCart() {
    fetch(routes.getCart)
        .then(response => response.json())
        .then(data => {
            cart = data.cart;
            renderCart(data.cart, data.cart_total);
        })
        .catch(error => console.error('Error loading cart:', error));
}

function renderCart(cartItems, total) {
    const cartContainer = document.getElementById('cart-items');
    const cartSummary = document.getElementById('cart-summary');
    const itemCount = document.getElementById('cart-item-count');

    if (Object.keys(cartItems).length === 0) {
        cartContainer.innerHTML = `
            <div class="text-center text-gray-500 py-12">
                <div class="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-10 h-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13v8a2 2 0 002 2h10a2 2 0 002-2v-3" />
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">Your cart is empty</h3>
                <p class="text-gray-600">Add products from the left panel to start selling</p>
            </div>
        `;
        cartSummary.classList.add('hidden');
        itemCount.textContent = '0 items';
        return;
    }

    let cartHtml = '';
    let totalItems = 0;

    for (const [key, item] of Object.entries(cartItems)) {
        const price = item.sale_price || item.price;
        const subtotal = item.quantity * price;
        totalItems += item.quantity;

        cartHtml += `
            <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex justify-between items-start mb-3">
                    <div class="flex-1 min-w-0">
                        <h4 class="font-semibold text-gray-900 text-sm leading-tight mb-1">${item.name}</h4>
                        <p class="text-xs text-gray-500 mb-1">${item.sku}</p>
                        ${item.color_name ? `<p class="text-xs text-blue-600">Color: ${item.color_name}</p>` : ''}
                        ${item.size_name ? `<p class="text-xs text-green-600">Size: ${item.size_name}</p>` : ''}
                    </div>
                    <button onclick="removeFromCart('${key}')" class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors" title="Remove item">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-2">
                        <button onclick="updateQuantity('${key}', ${item.quantity - 1})"
                                class="w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 hover:text-gray-800 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
                                ${item.quantity <= 1 ? 'disabled' : ''}>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                            </svg>
                        </button>
                        <span class="text-sm font-semibold text-gray-900 min-w-[2rem] text-center">${item.quantity}</span>
                        <button onclick="updateQuantity('${key}', ${item.quantity + 1})"
                                class="w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 hover:text-gray-800 transition-colors flex items-center justify-center">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                    <div class="text-right">
                        <p class="text-lg font-bold text-gray-900">$${subtotal.toFixed(2)}</p>
                        <p class="text-xs text-gray-500">$${price.toFixed(2)} each</p>
                    </div>
                </div>
            </div>
        `;
    }

    cartContainer.innerHTML = cartHtml;
    cartSummary.classList.remove('hidden');
    itemCount.textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''}`;

    // Calculate tax (8%) and update summary
    const subtotal = total;
    const tax = subtotal * 0.08;
    const finalTotal = subtotal + tax;

    document.getElementById('cart-subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('cart-tax').textContent = `$${tax.toFixed(2)}`;
    document.getElementById('cart-discount').textContent = '$0.00';
    document.getElementById('cart-total').textContent = `$${finalTotal.toFixed(2)}`;

    // Update change calculation if amount is entered
    calculateChange();
}

function updateQuantity(cartKey, newQuantity) {
    fetch(routes.updateCartItem, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            cart_item_key: cartKey,
            quantity: newQuantity
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadCart();
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => console.error('Error:', error));
}

function removeFromCart(cartKey) {
    fetch(routes.removeFromCart, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            cart_item_key: cartKey
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadCart();
        }
    })
    .catch(error => console.error('Error:', error));
}

function clearCart() {
    if (confirm('Are you sure you want to clear the cart?')) {
        fetch(routes.clearCart, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                loadCart();
                showNotification('Cart cleared', 'success');
            }
        })
        .catch(error => console.error('Error:', error));
    }
}

function processPayment(e) {
    e.preventDefault();

    const formData = new FormData(e.target);
    const paymentData = Object.fromEntries(formData);

    // Calculate final total with tax
    const subtotal = parseFloat(document.getElementById('cart-subtotal').textContent.replace('$', ''));
    const tax = parseFloat(document.getElementById('cart-tax').textContent.replace('$', ''));
    paymentData.final_total = subtotal + tax;

    // Disable button during processing
    const submitButton = document.getElementById('process-payment');
    const originalText = submitButton.innerHTML;
    submitButton.disabled = true;
    submitButton.innerHTML = `
        <span class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing...
        </span>
    `;

    fetch(routes.processPayment, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify(paymentData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('Payment processed successfully!', 'success');
            loadCart(); // This will clear the cart
            e.target.reset(); // Clear the form
            document.getElementById('change-display').classList.add('hidden'); // Hide change display

            // Print receipt or show receipt modal
            if (data.receipt_data) {
                printReceipt(data.receipt_data);
            }
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Payment processing failed', 'error');
    })
    .finally(() => {
        // Re-enable button
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
    });
}

function printReceipt(receiptData) {
    // Modern receipt print
    const receiptWindow = window.open('', '_blank');
    const cashierName = document.querySelector('.font-semibold.text-gray-900').textContent;

    receiptWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Receipt - ${receiptData.order_number}</title>
            <style>
                body {
                    font-family: 'Courier New', monospace;
                    margin: 0;
                    padding: 20px;
                    max-width: 300px;
                    margin: 0 auto;
                }
                .center { text-align: center; }
                .right { text-align: right; }
                .bold { font-weight: bold; }
                .receipt-header {
                    border-bottom: 2px solid #000;
                    padding-bottom: 10px;
                    margin-bottom: 15px;
                }
                .item-row {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 5px;
                    font-size: 12px;
                }
                .total-row {
                    border-top: 1px solid #000;
                    padding-top: 5px;
                    margin-top: 5px;
                    font-weight: bold;
                }
                .footer {
                    margin-top: 20px;
                    text-align: center;
                    font-size: 11px;
                }
            </style>
        </head>
        <body>
            <div class="receipt-header center">
                <div class="bold" style="font-size: 18px;">HERITAGE LUX</div>
                <div style="font-size: 12px;">Fashion & Lifestyle</div>
                <div style="font-size: 10px;">Point of Sale Receipt</div>
            </div>

            <div style="font-size: 11px; margin-bottom: 15px;">
                <div>Order: <span class="bold">${receiptData.order_number}</span></div>
                <div>Date: ${new Date().toLocaleString()}</div>
                <div>Cashier: ${cashierName}</div>
            </div>

            <div style="border-bottom: 1px dashed #000; margin-bottom: 10px;"></div>

            <!-- Cart items -->
            <div style="margin-bottom: 10px;">
                ${Object.values(cart).map(item => `
                    <div class="item-row">
                        <span>${item.name.substring(0, 20)}${item.name.length > 20 ? '...' : ''}</span>
                        <span>${item.quantity}x $${(item.sale_price || item.price).toFixed(2)}</span>
                    </div>
                    <div class="item-row" style="font-size: 10px; color: #666;">
                        <span></span>
                        <span>$${(item.quantity * (item.sale_price || item.price)).toFixed(2)}</span>
                    </div>
                `).join('')}
            </div>

            <div style="border-bottom: 1px dashed #000; margin-bottom: 10px;"></div>

            <div style="font-size: 11px;">
                <div class="item-row">
                    <span>Subtotal:</span>
                    <span>$${(receiptData.total_amount / 1.08).toFixed(2)}</span>
                </div>
                <div class="item-row">
                    <span>Tax (8%):</span>
                    <span>$${(receiptData.total_amount - (receiptData.total_amount / 1.08)).toFixed(2)}</span>
                </div>
                <div class="item-row total-row">
                    <span>TOTAL:</span>
                    <span>$${receiptData.total_amount.toFixed(2)}</span>
                </div>
                <div class="item-row">
                    <span>Paid:</span>
                    <span>$${receiptData.amount_paid.toFixed(2)}</span>
                </div>
                <div class="item-row">
                    <span>Change:</span>
                    <span>$${receiptData.change_amount.toFixed(2)}</span>
                </div>
            </div>

            <div class="footer">
                <div style="border-top: 1px dashed #000; padding-top: 10px; margin-top: 15px;">
                    <div class="bold">Thank you for shopping!</div>
                    <div style="margin-top: 5px;">Visit us again soon</div>
                    <div style="margin-top: 5px; font-size: 9px;">Powered by Multi-Vendor Fashion</div>
                </div>
            </div>
        </body>
        </html>
    `);
    receiptWindow.print();
}

function searchProducts() {
    const query = document.getElementById('product-search').value;
    const categoryId = document.getElementById('category-filter').value;

    fetch(`${routes.searchProducts}?q=${encodeURIComponent(query)}&category_id=${categoryId}`)
        .then(response => response.json())
        .then(data => {
            renderProducts(data.products);
        })
        .catch(error => console.error('Error:', error));
}

function filterProducts() {
    searchProducts();
}

function renderProducts(products) {
    const grid = document.getElementById('products-grid');
    let html = '';

    products.forEach(product => {
        const image = product.images ? `{{ asset('storage/') }}/${JSON.parse(product.images)[0]}` : '';
        html += `
            <div class="product-card bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
                 data-product-id="${product.id}"
                 data-product-name="${product.name}"
                 data-product-price="${product.price}"
                 data-product-sale-price="${product.sale_price || ''}"
                 data-product-image="${image}"
                 data-product-sku="${product.sku}"
                 data-stock-quantity="${product.stock_quantity}">
                <div class="aspect-square mb-3">
                    ${image ? `<img src="${image}" alt="${product.name}" class="w-full h-full object-cover rounded">` :
                             `<div class="w-full h-full bg-gray-200 rounded flex items-center justify-center"><span class="text-gray-400">No Image</span></div>`}
                </div>
                <h3 class="font-medium text-sm mb-1 truncate">${product.name}</h3>
                <p class="text-xs text-gray-500 mb-2">${product.sku}</p>
                <div class="flex justify-between items-center">
                    <div class="text-sm font-semibold">
                        ${product.sale_price ?
                            `<span class="text-red-600">$${parseFloat(product.sale_price).toFixed(2)}</span>
                             <span class="text-gray-400 line-through text-xs ml-1">$${parseFloat(product.price).toFixed(2)}</span>` :
                            `<span class="text-gray-900">$${parseFloat(product.price).toFixed(2)}</span>`
                        }
                    </div>
                    <div class="text-xs text-gray-500">
                        Stock: ${product.stock_quantity}
                    </div>
                </div>
            </div>
        `;
    });

    grid.innerHTML = html;
}

function loadMoreProducts() {
    // Implement pagination for products
    showNotification('Load more functionality not implemented yet', 'info');
}

function showNotification(message, type = 'info') {
    // Modern notification system
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 px-6 py-4 rounded-xl shadow-lg z-50 transform transition-all duration-300 translate-x-full max-w-sm`;

    const colors = {
        success: 'bg-green-500 border-green-600',
        error: 'bg-red-500 border-red-600',
        warning: 'bg-yellow-500 border-yellow-600',
        info: 'bg-blue-500 border-blue-600'
    };

    const icons = {
        success: `<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" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>`,
        error: `<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" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>`,
        warning: `<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" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                 </svg>`,
        info: `<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" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>`
    };

    notification.innerHTML = `
        <div class="flex items-center space-x-3">
            <div class="flex-shrink-0">
                ${icons[type] || icons.info}
            </div>
            <div class="flex-1">
                <p class="text-sm font-medium text-white">${message}</p>
            </div>
            <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 text-white hover:text-gray-200 transition-colors">
                <svg class="w-4 h-4" 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>
            </button>
        </div>
    `;

    notification.classList.add(colors[type] || colors.info);
    document.body.appendChild(notification);

    // Animate in
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);

    // Auto remove
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => notification.remove(), 300);
    }, 4000);
}

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
</script>
@endpush
@endsection