@extends('layouts.admin')

@section('page-title', 'POS System')

@section('content')
<div class="pos-container">
    <div class="row">
        {{-- Products Section --}}
        <div class="col-lg-6">
            <div class="pos-products-card">
                <div class="pos-search-bar">
                    <input type="text" id="product-search" placeholder="Scan Barcode / Enter Product Name" class="pos-search-input">
                </div>
                <div class="pos-filters">
                    <div class="form-group">
                        <select id="category-filter" class="pos-select">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }} ({{ $products->where('category_id', $cat->id)->count() }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <select id="brand-filter" class="pos-select">
                            <option value="">All Brands</option>
                            @foreach(\App\Models\Brand::where('is_active', true)->get() as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div id="products-grid" class="pos-products-grid">
                    @foreach($products as $product)
                        <div class="pos-product-card" onclick="addToCart({{ $product->id }}, '{{ addslashes($product->name) }}', {{ $product->price }}, {{ $product->stock_quantity ?? 0 }})" data-category="{{ $product->category_id }}" data-name="{{ strtolower($product->name) }}" data-sku="{{ strtolower($product->sku ?? '') }}">
                            <div class="pos-product-thumb">
                                @if($product->primaryImage)
                                    <img src="{{ asset('storage/' . $product->primaryImage->path) }}" alt="{{ $product->name }}" class="img-fluid">
                                @else
                                    <div class="pos-product-placeholder">
                                        <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                    </div>
                                @endif
                            </div>
                            <p class="pos-product-name">{{ $product->name }}</p>
                            <div class="pos-product-price">
                                <span class="price">{{ $currencySymbol }}{{ number_format($product->price, 2) }}</span>
                                <span class="stock-badge {{ ($product->stock_quantity ?? 0) > 0 ? 'in-stock' : 'out-of-stock' }}">
                                    {{ ($product->stock_quantity ?? 0) > 0 ? 'In Stock: ' . ($product->stock_quantity ?? 0) : 'Out of Stock' }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Cart Section --}}
        <div class="col-lg-6">
            <div class="pos-cart-card">
                <div class="pos-cart-header">
                    <div class="pos-customer-section">
                        <div class="form-group">
                            <select id="customer-select" class="pos-select">
                                <option value="">Walk-In Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" data-name="{{ $customer->name }}" data-email="{{ $customer->email }}" data-phone="{{ $customer->phone ?? '' }}">{{ $customer->name }} ({{ $customer->email }})</option>
                                @endforeach
                            </select>
                        </div>
                        <button onclick="openAddCustomerModal()" class="pos-add-customer-btn" title="Add New Customer">
                            <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                            Add
                        </button>
                    </div>
                    <button onclick="clearCart()" class="pos-clear-btn">
                        <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"/></svg>
                        Clear
                    </button>
                </div>

                <div id="cart-items" class="pos-cart-list">
                    <div class="pos-empty-cart">
                        <svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                        <p class="text-sm text-gray-500">Cart is empty</p>
                    </div>
                </div>

                <div class="pos-cart-summary">
                    <ul class="pos-summary-list">
                        <li><span>Subtotal</span><span id="subtotal">{{ $currencySymbol }}0.00</span></li>
                        <li><span>Tax ({{ $taxRate }}%)</span><span id="tax">{{ $currencySymbol }}0.00</span></li>
                        <li><span>Discount</span><span id="discount-display">{{ $currencySymbol }}0.00</span></li>
                    </ul>
                    <div class="pos-total">
                        <p>Total <span id="total">{{ $currencySymbol }}0.00</span></p>
                    </div>
                </div>

                <div class="pos-cart-footer">
                    <div class="form-group">
                        <label>Discount ({{ $currencySymbol }})</label>
                        <input type="number" id="discount" value="0" min="0" step="0.01" placeholder="0" class="pos-input">
                    </div>
                    <div class="pos-payment-methods-label">
                        <span>Payment Method</span>
                    </div>
                    <div class="pos-payment-grid">
                        <button onclick="openPaymentModal('cash')" id="checkout-cash" class="pos-payment-btn pos-payment-btn-cash" disabled>
                            <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            <span>Cash</span>
                        </button>
                        <button onclick="openPaymentModal('paystack')" id="checkout-paystack" class="pos-payment-btn pos-payment-btn-paystack" disabled>
                            <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            <span>Paystack</span>
                        </button>
                        <button onclick="openPaymentModal('mtn_momo')" id="checkout-mtn_momo" class="pos-payment-btn pos-payment-btn-momo" disabled>
                            <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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                            <span>MTN MoMo</span>
                        </button>
                        <button onclick="openPaymentModal('telecash')" id="checkout-telecash" class="pos-payment-btn pos-payment-btn-telecash" disabled>
                            <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="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg>
                            <span>Telecash</span>
                        </button>
                        <button onclick="openPaymentModal('flutterwave')" id="checkout-flutterwave" class="pos-payment-btn pos-payment-btn-flutterwave" disabled>
                            <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            <span>Flutterwave</span>
                        </button>
                        <button onclick="openPaymentModal('card')" id="checkout-card" class="pos-payment-btn pos-payment-btn-card" disabled>
                            <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            <span>Card</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Payment Modal --}}
<div id="payment-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 id="payment-modal-title" class="text-lg font-bold text-gray-900 flex items-center gap-2">
                Payment
            </h3>
            <button onclick="closePaymentModal()" class="p-1 text-gray-400 hover:text-gray-600">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="space-y-4">
            <div class="bg-gray-50 rounded-lg p-4 text-center">
                <p class="text-sm text-gray-500 mb-1">Amount Due</p>
                <p id="payment-amount-due" class="text-3xl font-bold text-gray-900"></p>
            </div>

            {{-- Cash specific fields --}}
            <div id="cash-fields" class="hidden">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount Tendered</label>
                    <input type="number" id="amount-tendered" step="0.01" min="0" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-lg font-semibold text-center focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none" placeholder="0.00">
                </div>
                <div class="grid grid-cols-4 gap-2">
                    <button onclick="setTendered(10)" class="quick-cash-btn">{{ $currencySymbol }}10</button>
                    <button onclick="setTendered(20)" class="quick-cash-btn">{{ $currencySymbol }}20</button>
                    <button onclick="setTendered(50)" class="quick-cash-btn">{{ $currencySymbol }}50</button>
                    <button onclick="setTendered(100)" class="quick-cash-btn">{{ $currencySymbol }}100</button>
                </div>
                <button onclick="setExactAmount()" class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
                    Exact Amount
                </button>
                <div class="bg-emerald-50 rounded-lg p-4 mt-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-600">Change</span>
                        <span id="change-amount" class="text-2xl font-bold text-emerald-600">{{ $currencySymbol }}0.00</span>
                    </div>
                </div>
            </div>

            {{-- Mobile Money fields (MTN MoMo, Telecash) --}}
            <div id="momo-fields" class="hidden">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Customer Phone Number</label>
                    <input type="text" id="momo-phone" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-center focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 outline-none" placeholder="+233 XX XXX XXXX">
                </div>
                <div class="bg-amber-50 rounded-lg p-4">
                    <div class="flex items-center gap-3">
                        <svg class="w-8 h-8 text-amber-600" 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"/></svg>
                        <div>
                            <p id="momo-instruction" class="text-sm font-medium text-amber-900">Customer will receive a prompt on their phone</p>
                            <p class="text-xs text-amber-600">Enter phone number and confirm to send payment request</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card/Paystack/Flutterwave info --}}
            <div id="gateway-fields" class="hidden">
                <div class="bg-indigo-50 rounded-lg p-4">
                    <div class="flex items-center gap-3">
                        <svg class="w-8 h-8 text-indigo-600" 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"/></svg>
                        <div>
                            <p id="gateway-instruction" class="text-sm font-medium text-indigo-900">Gateway: <span id="gateway-name"></span></p>
                            <p class="text-xs text-indigo-600">Customer will be prompted to enter payment details</p>
                        </div>
                    </div>
                </div>
            </div>

            <button onclick="confirmPayment()" id="confirm-payment-btn" class="w-full py-3 text-white text-sm font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                Confirm Payment
            </button>
        </div>
    </div>
</div>

{{-- Add Customer Modal --}}
<div id="add-customer-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                Add New Customer
            </h3>
            <button onclick="closeAddCustomerModal()" class="p-1 text-gray-400 hover:text-gray-600">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form id="add-customer-form" onsubmit="submitNewCustomer(event)">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label>
                    <input type="text" id="new-customer-name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="Full name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
                    <input type="email" id="new-customer-email" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="customer@email.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="text" id="new-customer-phone" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="+1 (555) 000-0000">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                    <input type="password" id="new-customer-password" required minlength="8" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="Min 8 characters">
                </div>
                <div id="add-customer-error" class="hidden bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm"></div>
                <div id="add-customer-success" class="hidden bg-green-50 border border-green-200 text-green-700 px-3 py-2 rounded-lg text-sm"></div>
                <button type="submit" id="submit-customer-btn" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                    Create & Select Customer
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Checkout Details Modal --}}
<div id="checkout-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-gray-900">Customer Details</h3>
            <button onclick="closeCheckoutModal()" class="p-1 text-gray-400 hover:text-gray-600">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
                <input type="text" id="customer-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="Walk-in Customer">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Customer Email</label>
                <input type="email" id="customer-email" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="customer@email.com">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Customer Phone</label>
                <input type="text" id="customer-phone" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="+1 (555) 000-0000">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                <textarea id="order-notes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none resize-none" placeholder="Order notes..."></textarea>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">Payment Method</span>
                    <span id="payment-method-display" class="text-sm font-bold text-indigo-600"></span>
                </div>
                <div class="flex items-center justify-between mt-2">
                    <span class="text-lg font-bold text-gray-900">Total</span>
                    <span id="modal-total" class="text-2xl font-bold text-indigo-600"></span>
                </div>
            </div>
            <button onclick="confirmCheckout()" id="confirm-checkout-btn" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors">
                Confirm & Complete Sale
            </button>
        </div>
    </div>
</div>

{{-- Success Modal --}}
<div id="success-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-2">Sale Complete!</h3>
        <p id="success-order-number" class="text-sm text-gray-500 mb-2"></p>
        <p id="success-change" class="text-sm text-green-600 font-medium mb-4 hidden"></p>
        <div class="flex gap-2">
            <button onclick="printReceipt()" class="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition-colors">
                Print Receipt
            </button>
            <button onclick="closeSuccessModal()" class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors">
                New Sale
            </button>
        </div>
    </div>
</div>

{{-- Receipt Template (Hidden) --}}
<div id="receipt-template" class="hidden">
    <div id="receipt-content" style="font-family: monospace; font-size: 12px; max-width: 300px; padding: 20px;">
        <div style="text-align: center; margin-bottom: 15px;">
            <h2 style="margin: 0; font-size: 16px;">{{ siteName() }}</h2>
            <p style="margin: 5px 0; font-size: 11px; color: #666;">Point of Sale Receipt</p>
        </div>
        <hr style="border: none; border-top: 1px dashed #ccc; margin: 10px 0;">
        <p style="margin: 5px 0;"><strong>Order:</strong> <span id="receipt-order-number"></span></p>
        <p style="margin: 5px 0;"><strong>Date:</strong> <span id="receipt-date"></span></p>
        <p style="margin: 5px 0;"><strong>Customer:</strong> <span id="receipt-customer"></span></p>
        <hr style="border: none; border-top: 1px dashed #ccc; margin: 10px 0;">
        <div id="receipt-items"></div>
        <hr style="border: none; border-top: 1px dashed #ccc; margin: 10px 0;">
        <p style="margin: 5px 0; display: flex; justify-content: space-between;"><span>Subtotal:</span><span id="receipt-subtotal"></span></p>
        <p style="margin: 5px 0; display: flex; justify-content: space-between;"><span>Tax:</span><span id="receipt-tax"></span></p>
        <p style="margin: 5px 0; display: flex; justify-content: space-between;"><span>Discount:</span><span id="receipt-discount"></span></p>
        <p style="margin: 10px 0; font-size: 14px; font-weight: bold; display: flex; justify-content: space-between;"><span>TOTAL:</span><span id="receipt-total"></span></p>
        <hr style="border: none; border-top: 1px dashed #ccc; margin: 10px 0;">
        <p style="margin: 5px 0;"><strong>Payment:</strong> <span id="receipt-payment-method"></span></p>
        <p style="margin: 5px 0;"><strong>Transaction ID:</strong> <span id="receipt-transaction-id"></span></p>
        <p id="receipt-change-row" style="margin: 5px 0; display: none;"><strong>Change:</strong> <span id="receipt-change"></span></p>
        <hr style="border: none; border-top: 1px dashed #ccc; margin: 10px 0;">
        <p style="text-align: center; margin: 10px 0; color: #666;">Thank you for your purchase!</p>
    </div>
</div>

<style>
.pos-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 12px;
}
.pos-products-card, .pos-cart-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.pos-search-bar {
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
}
.pos-search-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 2px solid #0fac81;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.pos-search-input:focus {
    border-color: #0891b2;
}
.pos-filters {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.pos-filters .form-group {
    flex: 1;
    margin: 0;
}
.pos-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    outline: none;
}
.pos-select:focus {
    border-color: #6366f1;
}
.pos-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}
.pos-product-card {
    cursor: pointer;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
    background: #fff;
}
.pos-product-card:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}
.pos-product-thumb {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: #f9fafb;
    border-radius: 6px;
    overflow: hidden;
}
.pos-product-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.pos-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pos-product-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-product-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pos-product-price .price {
    font-size: 15px;
    font-weight: 700;
    color: #0fac81;
}
.pos-product-price .stock-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.pos-product-price .stock-badge.in-stock {
    background: #ecfdf5;
    color: #059669;
}
.pos-product-price .stock-badge.out-of-stock {
    background: #fef2f2;
    color: #dc2626;
}
.pos-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.pos-customer-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    margin-right: 12px;
}
.pos-customer-section .form-group {
    flex: 1;
    margin: 0;
}
.pos-add-customer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #6366f1;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pos-add-customer-btn:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.pos-clear-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.pos-clear-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.pos-cart-list {
    height: calc(100vh - 520px);
    overflow-y: auto;
    padding: 12px 16px;
}
.pos-empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
}
.pos-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
}
.pos-cart-item-info {
    flex: 1;
    min-width: 0;
}
.pos-cart-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-cart-item-price {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.pos-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pos-cart-item-qty button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.pos-cart-item-qty button:hover {
    background: #f3f4f6;
}
.pos-cart-item-qty span {
    width: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.pos-cart-item-total {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    min-width: 60px;
    text-align: right;
}
.pos-cart-item-remove {
    padding: 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s;
}
.pos-cart-item-remove:hover {
    color: #dc2626;
}
.pos-cart-summary {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
.pos-summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.pos-summary-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #6b7280;
}
.pos-summary-list li span:last-child {
    font-weight: 600;
    color: #111827;
}
.pos-total {
    border-top: 2px solid #e5e7eb;
    padding-top: 12px;
}
.pos-total p {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.pos-total p span {
    color: #0fac81;
}
.pos-cart-footer {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.pos-cart-footer .form-group {
    margin-bottom: 12px;
}
.pos-cart-footer label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}
.pos-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}
.pos-input:focus {
    border-color: #6366f1;
}
.pos-payment-methods-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.pos-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.pos-payment-btn {
    height: 64px;
    border: 2px solid;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.pos-payment-btn:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.pos-payment-btn:active:not(:disabled) {
    transform: translateY(0);
}
.pos-payment-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pos-payment-btn-cash {
    background: #ecfdf5;
    border-color: #10b981;
    color: #059669;
}
.pos-payment-btn-cash:hover:not(:disabled) {
    background: #10b981;
    color: #fff;
}
.pos-payment-btn-paystack {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #16a34a;
}
.pos-payment-btn-paystack:hover:not(:disabled) {
    background: #22c55e;
    color: #fff;
}
.pos-payment-btn-momo {
    background: #fefce8;
    border-color: #eab308;
    color: #ca8a04;
}
.pos-payment-btn-momo:hover:not(:disabled) {
    background: #eab308;
    color: #fff;
}
.pos-payment-btn-telecash {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}
.pos-payment-btn-telecash:hover:not(:disabled) {
    background: #ef4444;
    color: #fff;
}
.pos-payment-btn-flutterwave {
    background: #fff7ed;
    border-color: #f97316;
    color: #ea580c;
}
.pos-payment-btn-flutterwave:hover:not(:disabled) {
    background: #f97316;
    color: #fff;
}
.pos-payment-btn-card {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4f46e5;
}
.pos-payment-btn-card:hover:not(:disabled) {
    background: #6366f1;
    color: #fff;
}
.quick-cash-btn {
    padding: 12px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-cash-btn:hover {
    border-color: #10b981;
    background: #ecfdf5;
    color: #059669;
}
</style>

<script>
let cart = [];
let selectedPaymentMethod = '';
let currentTotal = 0;
let lastOrder = null;
let selectedCustomerId = null;
const taxRate = {{ $taxRate }};
const currencySymbol = '{{ $currencySymbol }}';

const paymentMethodConfig = {
    cash: { title: 'Cash Payment', btnClass: 'bg-emerald-600 hover:bg-emerald-700', fields: 'cash-fields' },
    paystack: { title: 'Paystack Payment', btnClass: 'bg-green-600 hover:bg-green-700', fields: 'gateway-fields', gateway: 'Paystack' },
    mtn_momo: { title: 'MTN MoMo Payment', btnClass: 'bg-yellow-500 hover:bg-yellow-600', fields: 'momo-fields', instruction: 'Customer will receive an MoMo prompt on their phone' },
    telecash: { title: 'Telecash Payment', btnClass: 'bg-red-600 hover:bg-red-700', fields: 'momo-fields', instruction: 'Customer will receive a Telecash prompt on their phone' },
    flutterwave: { title: 'Flutterwave Payment', btnClass: 'bg-orange-600 hover:bg-orange-700', fields: 'gateway-fields', gateway: 'Flutterwave' },
    card: { title: 'Card Payment', btnClass: 'bg-indigo-600 hover:bg-indigo-700', fields: 'gateway-fields', gateway: '{{ ucfirst($paymentGateway) }}' },
};

document.getElementById('customer-select').addEventListener('change', function() {
    const option = this.options[this.selectedIndex];
    selectedCustomerId = this.value || null;

    if (selectedCustomerId) {
        document.getElementById('customer-name').value = option.dataset.name || '';
        document.getElementById('customer-email').value = option.dataset.email || '';
        document.getElementById('customer-phone').value = option.dataset.phone || '';
    } else {
        document.getElementById('customer-name').value = '';
        document.getElementById('customer-email').value = '';
        document.getElementById('customer-phone').value = '';
    }
});

function addToCart(id, name, price, stock) {
    const existing = cart.find(item => item.id === id);
    if (existing) {
        if (existing.quantity >= stock) {
            alert('Insufficient stock for ' + name);
            return;
        }
        existing.quantity++;
    } else {
        if (stock <= 0) {
            alert('Out of stock: ' + name);
            return;
        }
        cart.push({ id, name, price, quantity: 1, stock });
    }
    renderCart();
}

function removeFromCart(id) {
    cart = cart.filter(item => item.id !== id);
    renderCart();
}

function updateQuantity(id, delta) {
    const item = cart.find(i => i.id === id);
    if (!item) return;
    const newQty = item.quantity + delta;
    if (newQty <= 0) {
        removeFromCart(id);
        return;
    }
    if (newQty > item.stock) {
        alert('Insufficient stock');
        return;
    }
    item.quantity = newQty;
    renderCart();
}

function renderCart() {
    const container = document.getElementById('cart-items');

    if (cart.length === 0) {
        container.innerHTML = `
            <div id="empty-cart" class="pos-empty-cart">
                <svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                <p class="text-sm text-gray-500">Cart is empty</p>
            </div>
        `;
        document.getElementById('checkout-cash').disabled = true;
        document.getElementById('checkout-paystack').disabled = true;
        document.getElementById('checkout-mtn_momo').disabled = true;
        document.getElementById('checkout-telecash').disabled = true;
        document.getElementById('checkout-flutterwave').disabled = true;
        document.getElementById('checkout-card').disabled = true;
        updateTotals();
        return;
    }

    document.getElementById('checkout-cash').disabled = false;
    document.getElementById('checkout-paystack').disabled = false;
    document.getElementById('checkout-mtn_momo').disabled = false;
    document.getElementById('checkout-telecash').disabled = false;
    document.getElementById('checkout-flutterwave').disabled = false;
    document.getElementById('checkout-card').disabled = false;

    let html = '';
    cart.forEach(item => {
        html += `
            <div class="pos-cart-item">
                <div class="pos-cart-item-info">
                    <p class="pos-cart-item-name">${item.name}</p>
                    <p class="pos-cart-item-price">${currencySymbol}${item.price.toFixed(2)}</p>
                </div>
                <div class="pos-cart-item-qty">
                    <button onclick="updateQuantity(${item.id}, -1)">-</button>
                    <span>${item.quantity}</span>
                    <button onclick="updateQuantity(${item.id}, 1)">+</button>
                </div>
                <span class="pos-cart-item-total">${currencySymbol}${(item.price * item.quantity).toFixed(2)}</span>
                <div class="pos-cart-item-remove" onclick="removeFromCart(${item.id})">
                    <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"/></svg>
                </div>
            </div>
        `;
    });
    container.innerHTML = html;
    updateTotals();
}

function updateTotals() {
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const discount = parseFloat(document.getElementById('discount').value) || 0;
    const tax = subtotal * (taxRate / 100);
    const total = Math.max(0, subtotal - discount + tax);
    currentTotal = total;

    document.getElementById('subtotal').textContent = currencySymbol + subtotal.toFixed(2);
    document.getElementById('tax').textContent = currencySymbol + tax.toFixed(2);
    document.getElementById('discount-display').textContent = currencySymbol + discount.toFixed(2);
    document.getElementById('total').textContent = currencySymbol + total.toFixed(2);
}

document.getElementById('discount').addEventListener('input', updateTotals);

function clearCart() {
    if (cart.length === 0) return;
    if (confirm('Clear all items from cart?')) {
        cart = [];
        renderCart();
    }
}

function openPaymentModal(method) {
    if (cart.length === 0) return;
    
    selectedPaymentMethod = method;
    const config = paymentMethodConfig[method];
    
    document.getElementById('payment-modal-title').textContent = config.title;
    document.getElementById('payment-amount-due').textContent = currencySymbol + currentTotal.toFixed(2);
    
    document.getElementById('cash-fields').classList.add('hidden');
    document.getElementById('momo-fields').classList.add('hidden');
    document.getElementById('gateway-fields').classList.add('hidden');
    
    if (config.fields === 'cash-fields') {
        document.getElementById('cash-fields').classList.remove('hidden');
        document.getElementById('amount-tendered').value = '';
        document.getElementById('change-amount').textContent = currencySymbol + '0.00';
    } else if (config.fields === 'momo-fields') {
        document.getElementById('momo-fields').classList.remove('hidden');
        document.getElementById('momo-instruction').textContent = config.instruction;
        const customerSelect = document.getElementById('customer-select');
        const selectedOption = customerSelect.options[customerSelect.selectedIndex];
        document.getElementById('momo-phone').value = selectedOption.dataset.phone || '';
    } else if (config.fields === 'gateway-fields') {
        document.getElementById('gateway-fields').classList.remove('hidden');
        document.getElementById('gateway-name').textContent = config.gateway || method;
    }
    
    const btn = document.getElementById('confirm-payment-btn');
    btn.className = 'w-full py-3 text-white text-sm font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' + config.btnClass;
    btn.textContent = 'Confirm Payment';
    btn.disabled = method === 'cash';
    
    document.getElementById('payment-modal').classList.remove('hidden');
    
    if (method === 'cash') {
        document.getElementById('amount-tendered').focus();
    } else if (method === 'mtn_momo' || method === 'telecash') {
        document.getElementById('momo-phone').focus();
    }
}

function closePaymentModal() {
    document.getElementById('payment-modal').classList.add('hidden');
}

function setTendered(amount) {
    document.getElementById('amount-tendered').value = amount.toFixed(2);
    calculateChange();
}

function setExactAmount() {
    document.getElementById('amount-tendered').value = currentTotal.toFixed(2);
    calculateChange();
}

document.getElementById('amount-tendered').addEventListener('input', calculateChange);

function calculateChange() {
    const tendered = parseFloat(document.getElementById('amount-tendered').value) || 0;
    const change = Math.max(0, tendered - currentTotal);
    document.getElementById('change-amount').textContent = currencySymbol + change.toFixed(2);
    document.getElementById('confirm-payment-btn').disabled = tendered < currentTotal;
}

async function confirmPayment() {
    if (selectedPaymentMethod === 'cash') {
        const tendered = parseFloat(document.getElementById('amount-tendered').value) || 0;
        if (tendered < currentTotal) {
            alert('Amount tendered is less than total');
            return;
        }
    }
    
    if ((selectedPaymentMethod === 'mtn_momo' || selectedPaymentMethod === 'telecash') && !document.getElementById('momo-phone').value) {
        alert('Please enter customer phone number');
        return;
    }
    
    closePaymentModal();
    
    const config = paymentMethodConfig[selectedPaymentMethod];
    document.getElementById('payment-method-display').textContent = config.title.replace(' Payment', '');
    document.getElementById('modal-total').textContent = currencySymbol + currentTotal.toFixed(2);
    document.getElementById('checkout-modal').classList.remove('hidden');
}

function closeCheckoutModal() {
    document.getElementById('checkout-modal').classList.add('hidden');
}

async function confirmCheckout() {
    const btn = document.getElementById('confirm-checkout-btn');
    btn.disabled = true;
    btn.textContent = 'Processing...';

    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const discount = parseFloat(document.getElementById('discount').value) || 0;
    const tax = subtotal * (taxRate / 100);
    const amountTendered = selectedPaymentMethod === 'cash' ? (parseFloat(document.getElementById('amount-tendered').value) || currentTotal) : currentTotal;
    
    let customerPhone = document.getElementById('customer-phone').value;
    if ((selectedPaymentMethod === 'mtn_momo' || selectedPaymentMethod === 'telecash') && document.getElementById('momo-phone').value) {
        customerPhone = document.getElementById('momo-phone').value;
    }

    const payload = {
        _token: '{{ csrf_token() }}',
        items: cart.map(item => ({ id: item.id, quantity: item.quantity, price: item.price })),
        customer_id: selectedCustomerId,
        customer_name: document.getElementById('customer-name').value,
        customer_email: document.getElementById('customer-email').value,
        customer_phone: customerPhone,
        payment_method: selectedPaymentMethod,
        discount: discount,
        tax: tax,
        notes: document.getElementById('order-notes').value,
        amount_tendered: amountTendered,
    };

    try {
        const response = await fetch('{{ route('admin.pos.checkout') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await response.json();

        if (data.success) {
            closeCheckoutModal();
            lastOrder = data.order;
            document.getElementById('success-order-number').textContent = 'Order: ' + data.order.order_number;
            
            const changeEl = document.getElementById('success-change');
            if (selectedPaymentMethod === 'cash' && data.payment.change > 0) {
                changeEl.textContent = 'Change: ' + currencySymbol + data.payment.change.toFixed(2);
                changeEl.classList.remove('hidden');
            } else {
                changeEl.classList.add('hidden');
            }
            
            document.getElementById('success-modal').classList.remove('hidden');
            cart = [];
            renderCart();
        } else {
            alert(data.message || 'Checkout failed');
        }
    } catch (error) {
        alert('Network error. Please try again.');
    }

    btn.disabled = false;
    btn.textContent = 'Confirm & Complete Sale';
}

function closeSuccessModal() {
    document.getElementById('success-modal').classList.add('hidden');
    lastOrder = null;
}

function printReceipt() {
    if (!lastOrder) return;
    
    document.getElementById('receipt-order-number').textContent = lastOrder.order_number;
    document.getElementById('receipt-date').textContent = new Date().toLocaleString();
    const customerSelect = document.getElementById('customer-select');
    const selectedOption = customerSelect.options[customerSelect.selectedIndex];
    document.getElementById('receipt-customer').textContent = selectedOption.value ? selectedOption.text : (document.getElementById('customer-name').value || 'Walk-in Customer');
    
    let itemsHtml = '';
    lastOrder.items.forEach(item => {
        itemsHtml += `<p style="margin: 3px 0;">${item.product.name} x${item.quantity} - ${currencySymbol}${(item.price * item.quantity).toFixed(2)}</p>`;
    });
    document.getElementById('receipt-items').innerHTML = itemsHtml;
    
    document.getElementById('receipt-subtotal').textContent = currencySymbol + parseFloat(lastOrder.subtotal).toFixed(2);
    document.getElementById('receipt-tax').textContent = currencySymbol + parseFloat(lastOrder.tax).toFixed(2);
    document.getElementById('receipt-discount').textContent = currencySymbol + parseFloat(lastOrder.discount).toFixed(2);
    document.getElementById('receipt-total').textContent = currencySymbol + parseFloat(lastOrder.total).toFixed(2);
    document.getElementById('receipt-payment-method').textContent = selectedPaymentMethod.charAt(0).toUpperCase() + selectedPaymentMethod.slice(1);
    document.getElementById('receipt-transaction-id').textContent = 'POS-' + selectedPaymentMethod.toUpperCase() + '-' + Date.now();
    
    const changeEl = document.getElementById('success-change');
    if (!changeEl.classList.contains('hidden')) {
        document.getElementById('receipt-change-row').style.display = 'block';
        document.getElementById('receipt-change').textContent = changeEl.textContent.replace('Change: ', '');
    }
    
    const printWindow = window.open('', '_blank', 'width=400,height=600');
    printWindow.document.write('<html><head><title>Receipt</title></head><body>');
    printWindow.document.write(document.getElementById('receipt-content').outerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}

document.getElementById('product-search').addEventListener('input', function() {
    filterProducts();
});

document.getElementById('category-filter').addEventListener('change', function() {
    filterProducts();
});

document.getElementById('brand-filter').addEventListener('change', function() {
    filterProducts();
});

function filterProducts() {
    const search = document.getElementById('product-search').value.toLowerCase();
    const category = document.getElementById('category-filter').value;
    const cards = document.querySelectorAll('.pos-product-card');

    cards.forEach(card => {
        const name = card.dataset.name;
        const sku = card.dataset.sku;
        const cat = card.dataset.category;
        const matchSearch = !search || name.includes(search) || sku.includes(search);
        const matchCategory = !category || cat === category;
        card.style.display = matchSearch && matchCategory ? '' : 'none';
    });
}

function openAddCustomerModal() {
    document.getElementById('add-customer-modal').classList.remove('hidden');
    document.getElementById('new-customer-name').focus();
    document.getElementById('add-customer-error').classList.add('hidden');
    document.getElementById('add-customer-success').classList.add('hidden');
    document.getElementById('add-customer-form').reset();
}

function closeAddCustomerModal() {
    document.getElementById('add-customer-modal').classList.add('hidden');
}

async function submitNewCustomer(e) {
    e.preventDefault();
    
    const btn = document.getElementById('submit-customer-btn');
    const errorEl = document.getElementById('add-customer-error');
    const successEl = document.getElementById('add-customer-success');
    
    btn.disabled = true;
    btn.textContent = 'Creating...';
    errorEl.classList.add('hidden');
    successEl.classList.add('hidden');
    
    const payload = {
        _token: '{{ csrf_token() }}',
        first_name: document.getElementById('new-customer-name').value,
        email: document.getElementById('new-customer-email').value,
        phone: document.getElementById('new-customer-phone').value,
        password: document.getElementById('new-customer-password').value,
    };
    
    try {
        const response = await fetch('{{ route('admin.customers.store') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        });
        
        if (response.ok || response.status === 302) {
            const data = await response.json().catch(() => null);
            
            const name = payload.first_name;
            const email = payload.email;
            const phone = payload.phone;
            
            const select = document.getElementById('customer-select');
            const option = document.createElement('option');
            option.value = data?.customer?.id || 'new';
            option.dataset.name = name;
            option.dataset.email = email;
            option.dataset.phone = phone;
            option.textContent = name + ' (' + email + ')';
            option.selected = true;
            select.appendChild(option);
            
            selectedCustomerId = option.value;
            document.getElementById('customer-name').value = name;
            document.getElementById('customer-email').value = email;
            document.getElementById('customer-phone').value = phone;
            
            successEl.textContent = 'Customer created successfully!';
            successEl.classList.remove('hidden');
            
            setTimeout(() => {
                closeAddCustomerModal();
            }, 1000);
        } else {
            const data = await response.json();
            const errors = data.errors || {};
            const messages = Object.values(errors).flat();
            errorEl.textContent = messages.join('. ');
            errorEl.classList.remove('hidden');
        }
    } catch (error) {
        errorEl.textContent = 'Network error. Please try again.';
        errorEl.classList.remove('hidden');
    }
    
    btn.disabled = false;
    btn.textContent = 'Create & Select Customer';
}
</script>
@endsection