@extends('layouts.vendor')

@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="form-group">
                        <select id="customer-select" class="pos-select">
                            <option value="">Select Customer</option>
                            <option value="walkin" selected>Walk-In Customer</option>
                        </select>
                    </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 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>
                </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-actions">
                        <button onclick="openCashModal()" id="checkout-cash" class="pos-btn pos-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>
                            Cash
                        </button>
                        <button onclick="openCardModal()" id="checkout-card" class="pos-btn pos-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>
                            Card
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Cash Payment Modal --}}
<div id="cash-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-emerald-600" 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>
                Cash Payment
            </h3>
            <button onclick="closeCashModal()" 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="cash-amount-due" class="text-3xl font-bold text-gray-900"></p>
            </div>
            <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">
                <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>
            <button onclick="confirmCashPayment()" id="confirm-cash-btn" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                Complete Cash Sale
            </button>
        </div>
    </div>
</div>

{{-- Card Payment Modal --}}
<div id="card-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-emerald-600" 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>
                Card Payment
            </h3>
            <button onclick="closeCardModal()" 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 to Charge</p>
                <p id="card-amount" class="text-3xl font-bold text-gray-900"></p>
            </div>
            <div class="bg-emerald-50 rounded-lg p-4">
                <div class="flex items-center gap-3">
                    <svg class="w-8 h-8 text-emerald-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 class="text-sm font-medium text-emerald-900">Gateway: {{ ucfirst($paymentGateway) }}</p>
                        <p class="text-xs text-emerald-600">Customer will be prompted to enter card details</p>
                    </div>
                </div>
            </div>
            <button onclick="confirmCardPayment()" id="confirm-card-btn" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg transition-colors">
                Process Card Payment
            </button>
        </div>
    </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-emerald-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-emerald-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-emerald-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-emerald-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-emerald-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-emerald-600"></span>
                </div>
            </div>
            <button onclick="confirmCheckout()" id="confirm-checkout-btn" class="w-full py-3 bg-emerald-600 hover:bg-emerald-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-emerald-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-emerald-600 hover:bg-emerald-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;">Vendor POS 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: #0fac81;
}
.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: #0fac81;
    box-shadow: 0 4px 12px rgba(15, 172, 129, 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-cart-header .form-group {
    flex: 1;
    margin: 0;
    margin-right: 12px;
}
.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: #0fac81;
}
.pos-payment-actions {
    display: flex;
    gap: 12px;
}
.pos-btn {
    flex: 1;
    height: 56px;
    border: 2px solid;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pos-btn-cash {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}
.pos-btn-cash:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}
.pos-btn-card {
    background: #0fac81;
    border-color: #0fac81;
    color: #fff;
}
.pos-btn-card:hover:not(:disabled) {
    background: #0d9671;
    border-color: #0d9671;
    box-shadow: 0 4px 12px rgba(15, 172, 129, 0.3);
    transform: translateY(-1px);
}
.pos-btn:active:not(:disabled) {
    transform: translateY(0);
}
.pos-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #e5e7eb;
    border-color: #e5e7eb;
    color: #9ca3af;
}
.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;
const taxRate = {{ $taxRate }};
const currencySymbol = '{{ $currencySymbol }}';

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');
    const emptyCart = document.getElementById('empty-cart');

    if (cart.length === 0) {
        container.innerHTML = '';
        container.appendChild(emptyCart);
        emptyCart.style.display = 'flex';
        document.getElementById('checkout-cash').disabled = true;
        document.getElementById('checkout-card').disabled = true;
        updateTotals();
        return;
    }

    emptyCart.style.display = 'none';
    document.getElementById('checkout-cash').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 openCashModal() {
    if (cart.length === 0) return;
    selectedPaymentMethod = 'cash';
    document.getElementById('cash-amount-due').textContent = currencySymbol + currentTotal.toFixed(2);
    document.getElementById('amount-tendered').value = '';
    document.getElementById('change-amount').textContent = currencySymbol + '0.00';
    document.getElementById('confirm-cash-btn').disabled = true;
    document.getElementById('cash-modal').classList.remove('hidden');
    document.getElementById('amount-tendered').focus();
}

function closeCashModal() {
    document.getElementById('cash-modal').classList.add('hidden');
}

function openCardModal() {
    if (cart.length === 0) return;
    selectedPaymentMethod = 'card';
    document.getElementById('card-amount').textContent = currencySymbol + currentTotal.toFixed(2);
    document.getElementById('card-modal').classList.remove('hidden');
}

function closeCardModal() {
    document.getElementById('card-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-cash-btn').disabled = tendered < currentTotal;
}

async function confirmCashPayment() {
    closeCashModal();
    document.getElementById('payment-method-display').textContent = 'Cash';
    document.getElementById('modal-total').textContent = currencySymbol + currentTotal.toFixed(2);
    document.getElementById('checkout-modal').classList.remove('hidden');
}

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

    try {
        const response = await fetch('{{ route('vendor.pos.card-payment') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ amount: currentTotal }),
        });
        const data = await response.json();

        if (data.success) {
            closeCardModal();
            document.getElementById('payment-method-display').textContent = 'Card (' + data.payment_intent_id?.substring(0, 12) + '...)';
            document.getElementById('modal-total').textContent = currencySymbol + currentTotal.toFixed(2);
            document.getElementById('checkout-modal').classList.remove('hidden');
        } else {
            alert(data.message || 'Card payment initialization failed');
        }
    } catch (error) {
        alert('Network error. Please try again.');
    }

    btn.disabled = false;
    btn.textContent = 'Process Card Payment';
}

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;

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

    try {
        const response = await fetch('{{ route('vendor.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();
    document.getElementById('receipt-customer').textContent = 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';
    });
}
</script>
@endsection