<div class="pos-container-main">
    <style>
        /* Force Edge-to-Edge Layout by overriding dashboard containers */
        .main-content { margin-left: 250px !important; padding: 0 !important; }
        .main-body { padding: 0 !important; margin: 0 !important; max-width: 100% !important; overflow: hidden; }
        .sidebar + .main-content { margin-left: 250px !important; }
        
        @media (max-width: 991.98px) {
            .main-content { margin-left: 0 !important; }
        }
    </style>

    <!-- Session Check -->
    @if(!$currentSession)
        <div class="pos-session-required p-5 text-center">
            <div class="card shadow-sm border-0 mx-auto" style="max-width: 500px;">
                <div class="card-body py-5">
                    <i class="fas fa-cash-register fa-4x text-primary mb-4 opacity-75"></i>
                    <h3 class="fw-bold">{{ __('Start POS Session') }}</h3>
                    <p class="text-muted">{{ __('Please open a session to start selling.') }}</p>
                    <button class="btn btn-primary btn-lg px-5 rounded-pill shadow-sm" wire:click="$set('showSessionModal', true)">
                        <i class="fas fa-play me-2"></i>{{ __('Open Session') }}
                    </button>
                </div>
            </div>
        </div>
    @else
        <!-- Streamlined POS Header -->
        <div class="pos-header bg-dark text-white d-flex align-items-center px-3 border-bottom border-secondary shadow-sm" style="height: 60px; z-index: 1050;">
            <!-- Context Info -->
            <div class="d-flex align-items-center gap-3 flex-grow-1">
                <div class="d-flex align-items-center bg-white bg-opacity-10 rounded px-3 py-1 border border-white border-opacity-10 shadow-sm">
                    <div class="border-end border-white border-opacity-10 pe-3 me-3 text-start">
                        <small class="d-block text-white-50 text-uppercase fw-bold" style="font-size: 0.6rem; letter-spacing: 0.5px;">{{ __('Branch') }}</small>
                        <span class="fw-bold small">{{ $currentSession->branch->name ?? 'Main' }}</span>
                    </div>
                    <div class="text-start">
                        <small class="d-block text-white-50 text-uppercase fw-bold" style="font-size: 0.6rem; letter-spacing: 0.5px;">{{ __('Operator') }}</small>
                        <span class="fw-bold small">{{ Auth::user()->name }}</span>
                    </div>
                </div>
                <!-- Mini Breadcrumb -->
                <div class="text-white-50 small d-none d-md-block">
                    <i class="fas fa-chevron-right mx-2 opacity-50"></i>
                    <span class="text-white fw-bold">{{ __('POINT OF SALE') }}</span>
                </div>
            </div>

            <!-- Global Action Shortcut (Optional) -->
            <div class="d-flex gap-2">
                <!-- Actions are now inside layout panes, but we can keep Session status here -->
                <div class="badge bg-success border border-white border-opacity-10 d-flex align-items-center px-3" style="height: 38px;">
                    <i class="fas fa-circle-notch fa-spin me-2 small"></i>{{ __('Session Active') }}
                </div>
            </div>
        </div>

        <!-- POS Main Layout -->
        <div class="pos-layout position-relative">
            <!-- Flash Messages -->
            <div class="position-absolute top-0 start-50 translate-middle-x mt-3" style="z-index: 2000; width: 80%; max-width: 600px;">
                @if (session()->has('success'))
                    <div class="alert alert-success alert-dismissible fade show shadow-lg" role="alert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger alert-dismissible fade show shadow-lg" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
            <!-- Left Side: Products -->
            <div class="pos-products">
                <!-- Actions & Search -->
                <div class="pos-search mb-3">
                    <div class="d-flex gap-2">
                        <div class="input-group input-group-lg flex-grow-1">
                            <span class="input-group-text"><i class="fas fa-barcode"></i></span>
                            <input type="text" class="form-control" 
                                   wire:model.live.debounce.300ms="search"
                                   wire:keydown.enter="scanBarcode($event.target.value)"
                                   placeholder="{{ __('Scan barcode or search products...') }}"
                                   autofocus>
                        </div>
                        <div class="btn-group shadow-sm">
                            <button class="btn btn-success px-3" wire:click="showCashDrawer('in')" title="{{ __('Cash In') }}">
                                <i class="fas fa-plus-circle"></i> <span class="d-none d-md-inline ms-1">{{ __('In') }}</span>
                            </button>
                            <button class="btn btn-danger px-3 border-start border-white border-opacity-10" wire:click="showCashDrawer('out')" title="{{ __('Cash Out') }}">
                                <i class="fas fa-minus-circle"></i> <span class="d-none d-md-inline ms-1">{{ __('Out') }}</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Categories -->
                <div class="pos-categories">
                    <button class="btn {{ !$categoryFilter ? 'btn-primary' : 'btn-outline-secondary' }}" 
                            wire:click="$set('categoryFilter', null)">
                        {{ __('All') }}
                    </button>
                    @foreach($this->categories as $category)
                        <button class="btn {{ $categoryFilter === $category->id ? 'btn-primary' : 'btn-outline-secondary' }}"
                                wire:click="$set('categoryFilter', {{ $category->id }})">
                            <i class="{{ $category->icon ?? 'fas fa-folder' }} me-1"></i>
                            {{ $category->localized_name }}
                        </button>
                    @endforeach
                </div>

                <!-- Products Grid -->
                <div class="pos-products-grid">
                    @forelse($this->products as $product)
                        <div class="pos-product-card" wire:click="addToCart({{ $product->id }})" wire:key="product-{{ $product->id }}">
                            @if($product->image)
                                <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" class="pos-product-image">
                            @else
                                <div class="pos-product-placeholder">
                                    <i class="fas fa-mobile-alt fa-2x"></i>
                                </div>
                            @endif
                            <div class="pos-product-info">
                                <h6 class="pos-product-name">{{ $product->localized_name }}</h6>
                                <small class="text-muted">{{ $product->sku }}</small>
                                <div class="pos-product-price">E£ {{ number_format($product->selling_price, 2) }}</div>
                            </div>
                            @php $stock = $product->getStockForBranch(auth()->user()->branch_id ?? 1); @endphp
                            <span class="pos-product-stock badge {{ $stock > 0 ? 'bg-success' : 'bg-danger' }}">
                                {{ $stock }}
                            </span>
                        </div>
                    @empty
                        <div class="pos-no-products">
                            <i class="fas fa-search fa-3x text-muted"></i>
                            <p>{{ __('No products found') }}</p>
                        </div>
                    @endforelse
                </div>
                <!-- Pagination -->
                <div class="p-2 border-top bg-light">
                    {{ $this->products->links() }}
                </div>
            </div>

            <!-- Right Side: Cart -->
            <div class="pos-cart">
                <!-- Session Actions -->
                <div class="p-3 border-bottom d-flex gap-2 bg-light">
                    <button class="btn btn-info text-white flex-grow-1 shadow-sm" wire:click="$set('showQuickPoModal', true)">
                        <i class="fas fa-shopping-cart me-2"></i>{{ __('Quick PO') }}
                    </button>
                    <button class="btn btn-warning flex-grow-1 shadow-sm fw-bold" wire:click="showCloseSession">
                        <i class="fas fa-power-off me-2"></i>{{ __('Close') }}
                    </button>
                </div>
                <!-- Seller Selection -->
                <div class="pos-seller mb-3">
                    <label class="form-label small text-muted">{{ __('Seller') }}</label>
                    <select wire:model="sellerId" class="form-select form-select-sm">
                        @foreach($this->allUsers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Customer/Partner Selection -->
                <div class="pos-customer">
                    @if($this->selectedPartner)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <i class="fas fa-user me-2"></i>
                                <strong>{{ $this->selectedPartner->name }}</strong>
                            </div>
                            <button class="btn btn-sm btn-outline-danger" wire:click="clearPartner">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="d-flex justify-content-between small">
                            <span class="text-muted">{{ $this->selectedPartner->phone }}</span>
                            @if($this->selectedPartner->current_balance > 0)
                                <span class="text-danger">
                                    {{ __('Owes') }}: E£ {{ number_format($this->selectedPartner->current_balance, 2) }}
                                </span>
                            @elseif($this->selectedPartner->current_balance < 0)
                                <span class="text-success">
                                    {{ __('Credit') }}: E£ {{ number_format(abs($this->selectedPartner->current_balance), 2) }}
                                </span>
                            @endif
                        </div>
                        @if($this->selectedPartner->current_balance > 0)
                            <button class="btn btn-sm btn-outline-success w-100 mt-2" wire:click="openSettlementModal({{ $this->selectedPartner->id }})">
                                <i class="fas fa-hand-holding-usd me-1"></i>{{ __('Receive Payment') }}
                            </button>
                        @endif
                    @else
                        <button class="btn btn-outline-primary w-100" wire:click="$set('showPartnerModal', true)">
                            <i class="fas fa-user-plus me-2"></i>{{ __('Select Customer') }}
                        </button>
                    @endif
                </div>

                <!-- Cart Items -->
                <div class="pos-cart-items">
                    @forelse($cart as $index => $item)
                        <div class="pos-cart-item" wire:key="cart-{{ $index }}">
                            <div class="pos-cart-item-main">
                                <div class="d-flex justify-content-between align-items-start">
                                    <h6 class="mb-0">{{ $item['name'] }}</h6>
                                    @if(isset($item['max_stock']) && $item['max_stock'] < 999999)
                                        <small class="text-muted d-block">{{ $item['max_stock'] }} {{ __('in stock') }}</small>
                                    @endif
                                    <div class="col-auto">
                                        <button class="btn btn-link text-danger p-0" 
                                                wire:click="removeCartItem({{ $index }})">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Description/Note Input -->
                                <div class="col-12 mt-2">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text text-muted bg-light"><i class="fas fa-edit"></i></span>
                                        <input type="text" class="form-control border-start-0" 
                                               placeholder="{{ __('Description / Note') }}"
                                               value="{{ $item['repair_notes'] ?? '' }}"
                                               wire:change="updateCartNote({{ $index }}, $event.target.value)">
                                    </div>
                                </div>
                                
                                <div class="row mt-2">
                                    <div class="col-4">
                                        <label class="form-label small mb-0">{{ __('Price') }}</label>
                                        <input type="text" class="form-control form-control-sm bg-light" 
                                               value="{{ number_format($item['price'], 2) }}" readonly>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label small mb-0">{{ __('Qty') }}</label>
                                        <div class="input-group input-group-sm">
                                            <button class="btn btn-outline-secondary" type="button"
                                                    wire:click="updateCartQuantity({{ $index }}, {{ $item['quantity'] - 1 }})">-</button>
                                            <input type="number" class="form-control text-center" 
                                                   value="{{ $item['quantity'] }}" min="1"
                                                   wire:change="updateCartQuantity({{ $index }}, $event.target.value)">
                                            <button class="btn btn-outline-secondary" type="button"
                                                    wire:click="updateCartQuantity({{ $index }}, {{ $item['quantity'] + 1 }})">+</button>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label small mb-0">{{ __('Disc.') }}</label>
                                        <button class="btn btn-outline-warning btn-sm w-100" wire:click="openDiscountModal({{ $index }})">
                                            @if(($item['discount'] ?? 0) > 0)
                                                {{ $item['discount'] }} {{ isset($item['discount_type']) && $item['discount_type'] == 'percent' ? '%' : '' }}
                                            @else
                                                <i class="fas fa-tag"></i>
                                            @endif
                                        </button>
                                    </div>
                                </div>

                                @if(($item['warranty_months'] ?? 0) > 0 || ($item['is_service'] ?? false))
                                    <div class="mt-2">
                                        <label class="form-label small mb-0">{{ __('Warranty Until') }}</label>
                                        <input type="date" class="form-control form-control-sm"
                                               value="{{ $item['warranty_date'] }}"
                                               wire:change="updateWarrantyDate({{ $index }}, $event.target.value)">
                                    </div>
                                @endif

                                <div class="d-flex justify-content-between mt-2 pt-2 border-top">
                                    <span class="text-muted">{{ __('Total') }}</span>
                                    <strong>E£ {{ number_format($item['total'], 2) }}</strong>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="pos-cart-empty">
                            <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                            <p>{{ __('Cart is empty') }}</p>
                            <small class="text-muted">{{ __('Scan or click products to add') }}</small>
                        </div>
                    @endforelse
                </div>

                <!-- Cart Totals -->
                <div class="pos-cart-totals">
                    <!-- Global Discount Button -->
                    <button class="btn btn-outline-warning w-100 mb-3" wire:click="openDiscountModal()">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-tags me-2"></i>{{ __('Global Discount') }}</span>
                            @if($this->discountAmount > 0)
                                <span class="badge bg-dark">
                                    {{ $this->discount }} {{ $this->discountType == 'percent' ? '%' : 'E£' }}
                                </span>
                            @endif
                        </div>
                    </button>

                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ __('Subtotal') }}</span>
                        <span>E£ {{ number_format($this->subtotal, 2) }}</span>
                    </div>
                    @if($this->discountAmount > 0)
                        <div class="d-flex justify-content-between mb-2 text-danger">
                            <span>{{ __('Discount') }}</span>
                            <span>- E£ {{ number_format($this->discountAmount, 2) }}</span>
                        </div>
                    @endif
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <strong class="fs-4">{{ __('Total') }}</strong>
                        <strong class="fs-4 text-primary">E£ {{ number_format($this->total, 2) }}</strong>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-primary btn-lg" wire:click="showPayment" @if(empty($cart)) disabled @endif>
                            <i class="fas fa-credit-card me-2"></i>{{ __('Pay Now') }}
                        </button>
                        <button class="btn btn-outline-secondary" wire:click="clearCart" @if(empty($cart)) disabled @endif>
                            <i class="fas fa-trash me-2"></i>{{ __('Clear Cart') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Payment Modal -->
        @if($showPaymentModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); z-index: 1060;">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Payment') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showPaymentModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <div class="fs-1 text-primary fw-bold">E£ {{ number_format($this->total, 2) }}</div>
                            <small class="text-muted">{{ __('Total Amount') }}</small>
                        </div>

                        <!-- Pay Later Option -->
                        @if($selectedPartner)
                            <div class="mb-3">
                                <button type="button" 
                                        class="btn w-100 p-3 text-start border-2 {{ $isCredit ? 'border-primary bg-primary bg-opacity-10' : 'border-light bg-light' }}"
                                        wire:click="toggleCredit">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="fw-bold {{ $isCredit ? 'text-primary' : '' }}">
                                                <i class="fas fa-user-clock me-2"></i>{{ __('Pay Later (Add to Account)') }}
                                            </div>
                                            <small class="text-muted">{{ __('Balance will be added to customer\'s account') }}</small>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input" type="checkbox" role="switch" checked="{{ $isCredit }}" @readonly(true)>
                                        </div>
                                    </div>
                                </button>
                            </div>
                        @endif

                        @if(!$isCredit)
                            <!-- Added Payments List -->
                            @if(count($salePayments) > 0)
                                <div class="mb-3">
                                    <label class="form-label small text-uppercase text-muted fw-bold">{{ __('Payments Added') }}</label>
                                    <div class="list-group">
                                        @foreach($salePayments as $index => $payment)
                                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                                <div>
                                                    <span class="fw-bold">{{ $payment['name'] }}</span>
                                                    <div class="small text-muted">E£ {{ number_format($payment['amount'], 2) }}</div>
                                                </div>
                                                <button class="btn btn-sm btn-outline-danger" wire:click="removePayment({{ $index }})">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            @php
                                $totalPaid = collect($salePayments)->sum('amount');
                                $remaining = max(0, $this->total - $totalPaid);
                                $change = max(0, $totalPaid - $this->total);
                            @endphp

                            <!-- Payment Summary -->
                             <div class="row mb-3">
                                <div class="col-6">
                                    <div class="p-2 bg-light rounded text-center">
                                        <small class="d-block text-muted">{{ __('Paid') }}</small>
                                        <span class="fw-bold text-success">E£ {{ number_format($totalPaid, 2) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="p-2 bg-light rounded text-center">
                                        <small class="d-block text-muted">{{ __('Remaining') }}</small>
                                        <span class="fw-bold {{ $remaining > 0 ? 'text-danger' : 'text-success' }}">E£ {{ number_format($remaining, 2) }}</span>
                                        @if($remaining > 0 && $this->selectedPartner)
                                            <small class="d-block text-danger" style="font-size: 0.7rem;">{{ __('To Account') }}</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            @if($change > 0)
                                <div class="alert alert-success text-center py-2 mb-3">
                                    <strong>{{ __('Change') }}:</strong>
                                    <span class="fs-4">E£ {{ number_format($change, 2) }}</span>
                                </div>
                            @endif

                            <!-- Add Payment Form -->
                            <div class="card bg-light border-0 p-3 mb-3">
                                <label class="form-label fw-bold">{{ __('Add Payment') }}</label>
                                <div class="row g-2">
                                    <div class="col-5">
                                        <select class="form-select" wire:model="selectedPaymentMethodId">
                                            @foreach($this->paymentMethods as $method)
                                                <option value="{{ $method->id }}">{{ $method->localized_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-5">
                                        <div class="input-group">
                                            <span class="input-group-text px-2">E£</span>
                                            <input type="number" step="0.01" class="form-control text-end" 
                                                   wire:model="paymentInputAmount" 
                                                   wire:keydown.enter="addPayment">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <button class="btn btn-primary w-100" wire:click="addPayment" title="{{ __('Add') }}">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                @error('paymentInputAmount') <span class="text-danger small">{{ $message }}</span> @enderror
                                @error('selectedPaymentMethodId') <span class="text-danger small">{{ $message }}</span> @enderror
                                
                                @if($remaining > 0 && !$this->selectedPartner)
                                    <div class="alert alert-warning py-2 mt-2 mb-0 small">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        {{ __('Select a customer to allow partial payment.') }}
                                    </div>
                                @endif

                                <!-- Quick Buttons -->
                                <div class="d-flex gap-2 mt-2 flex-wrap">
                                    @if($remaining > 0)
                                        <button class="btn btn-sm btn-outline-primary flex-grow-1" 
                                                wire:click="$set('paymentInputAmount', '{{ $remaining }}')">
                                            {{ __('Exact') }} ({{ number_format($remaining, 2) }})
                                        </button>
                                    @endif
                                    @foreach([50, 100, 200, 500] as $amt)
                                        <button class="btn btn-sm btn-outline-secondary flex-grow-1"
                                                wire:click="$set('paymentInputAmount', '{{ $amt }}')">
                                            {{ $amt }}
                                        </button>
                                    @endforeach
                                </div>
                            </div>

                        @else
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ __('This sale will be added to partner\'s credit account.') }}
                                @if($selectedPartner)
                                    <div class="mt-2">
                                        <strong>{{ __('Current Balance') }}:</strong> 
                                        E£ {{ number_format($selectedPartner->current_balance, 2) }}
                                    </div>
                                    <div>
                                        <strong>{{ __('New Balance') }}:</strong> 
                                        E£ {{ number_format($selectedPartner->current_balance + $this->total, 2) }}
                                    </div>
                                @endif
                            </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label">{{ __('Notes') }}</label>
                            <textarea class="form-control" wire:model="notes" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showPaymentModal', false)">
                            {{ __('Cancel') }}
                        </button>
                        @php
                             $tPaid = collect($salePayments)->sum('amount');
                             $isPartial = $tPaid < $this->total && $tPaid > 0;
                             // Can complete if: 
                             // 1. Is explicitly Credit mode (Pay Later fully)
                             // 2. Is Partial payment AND Customer is selected (remaining goes to credit)
                             // 3. Full payment received
                             $canComplete = $isCredit || ($isPartial && $this->selectedPartner) || ($tPaid >= $this->total);
                        @endphp
                        <button type="button" class="btn {{ $canComplete ? 'btn-success' : 'btn-secondary' }} btn-lg" 
                                wire:click="processPayment"
                                @if(!$canComplete) disabled @endif>
                            <i class="fas fa-check me-2"></i>
                            @if($isCredit)
                                {{ __('Confirm Credit Sale') }}
                            @elseif($isPartial && $selectedPartner)
                                {{ __('Pay Partial & Credit Remainder') }}
                            @else
                                {{ __('Complete Sale') }}
                            @endif
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Discount Modal -->
    @if($showDiscountModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); z-index: 1070;">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content shadow-lg border-0">
                    <div class="modal-header bg-warning text-dark border-0">
                        <h5 class="modal-title fw-bold">
                            <i class="fas fa-tag me-2"></i>{{ $discountTargetIndex !== null ? __('Item Discount') : __('Global Discount') }}
                        </h5>
                        <button type="button" class="btn-close" wire:click="$set('showDiscountModal', false)"></button>
                    </div>
                    <div class="modal-body p-4">
                        @if(!$discountAuthorized)
                            <div class="text-center mb-4">
                                <i class="fas fa-lock fa-3x text-muted mb-3"></i>
                                <p class="text-muted">{{ __('Authorization Required') }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small text-uppercase fw-bold text-muted">{{ __('Clerk Password') }}</label>
                                <input type="password" class="form-control form-control-lg text-center" 
                                       wire:model="discountInputPassword" 
                                       wire:keydown.enter="authorizeDiscount" 
                                       placeholder="••••"
                                       autofocus>
                                @error('discountInputPassword') <span class="text-danger small mt-1 d-block">{{ $message }}</span> @enderror
                            </div>
                            <button class="btn btn-primary btn-lg w-100 shadow-sm" wire:click="authorizeDiscount">
                                {{ __('Authorize') }}
                            </button>
                        @else
                            <div class="mb-4">
                                <label class="form-label small text-uppercase fw-bold text-muted mb-3">{{ __('Select Type') }}</label>
                                <div class="btn-group w-100 shadow-sm" role="group">
                                    <input type="radio" class="btn-check" name="discountType" id="dt-fixed" value="fixed" wire:model.live="discountInputType">
                                    <label class="btn btn-outline-primary py-2 fw-bold" for="dt-fixed">E£ {{ __('Fixed') }}</label>

                                    <input type="radio" class="btn-check" name="discountType" id="dt-percent" value="percent" wire:model.live="discountInputType">
                                    <label class="btn btn-outline-primary py-2 fw-bold" for="dt-percent">% {{ __('Percent') }}</label>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label small text-uppercase fw-bold text-muted mb-2">{{ __('Discount Amount') }}</label>
                                <div class="input-group input-group-lg shadow-sm">
                                    <span class="input-group-text bg-light border-end-0">
                                        {{ $discountInputType === 'fixed' ? 'E£' : '%' }}
                                    </span>
                                    <input type="number" class="form-control form-control-lg text-center fw-bold border-start-0" 
                                           wire:model="discountInputAmount" 
                                           wire:keydown.enter="commitDiscount" 
                                           autofocus>
                                </div>
                            </div>
                            <button class="btn btn-success btn-lg w-100 shadow-sm fw-bold py-3" wire:click="commitDiscount">
                                <i class="fas fa-check me-2"></i>{{ __('Apply Discount') }}
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Receipt Modal -->
    @if($showReceiptModal && $lastSale)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Receipt') }}</h5>
                        <button type="button" class="btn-close" wire:click="closeReceipt"></button>
                    </div>
                    <div class="modal-body" id="receipt-content">
                        <div class="receipt">
                            <div class="receipt-header text-center mb-3">
                                <h4>{{ $shopName }}</h4>
                                @if($shopAddress)<p class="small mb-0">{{ $shopAddress }}</p>@endif
                                @if($shopPhone)<p class="small mb-0">{{ $shopPhone }}</p>@endif
                            </div>
                            
                            <hr>
                            
                            <div class="receipt-meta small mb-3">
                                <div class="d-flex justify-content-between">
                                    <span>{{ __('Invoice') }}:</span>
                                    <span>{{ $lastSale->sale_number }}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>{{ __('Date') }}:</span>
                                    <span>{{ $lastSale->created_at->format('Y-m-d H:i') }}</span>
                                </div>
                                @if($lastSale->partner)
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Customer') }}:</span>
                                        <span>{{ $lastSale->partner->name }}</span>
                                    </div>
                                @endif
                                @if($lastSale->seller)
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Seller') }}:</span>
                                        <span>{{ $lastSale->seller->name }}</span>
                                    </div>
                                @endif
                                @if($lastSale->is_credit)
                                    <div class="d-flex justify-content-between text-danger fw-bold">
                                        <span>{{ __('Payment') }}:</span>
                                        <span>{{ __('PAY LATER (ACCOUNT)') }}</span>
                                    </div>
                                @endif
                            </div>

                            <hr>

                            <table class="table table-sm mb-3">
                                <thead>
                                    <tr>
                                        <th>{{ __('Item') }}</th>
                                        <th class="text-center">{{ __('Qty') }}</th>
                                        <th class="text-end">{{ __('Total') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($lastSale->items as $item)
                                        <tr>
                                            <td>
                                                {{ $item->product->localized_name }}
                                                @if($item->repair_notes)
                                                    <br><small class="text-muted">
                                                        {{ $item->repair_notes }}
                                                    </small>
                                                @endif
                                                @if($item->warranty_date)
                                                    <br><small class="text-muted">
                                                        {{ __('Warranty') }}: {{ $item->warranty_date }}
                                                    </small>
                                                @endif
                                            </td>
                                            <td class="text-center">{{ $item->quantity }}</td>
                                            <td class="text-end">{{ number_format($item->total, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            <hr>

                            <div class="receipt-totals">
                                <div class="d-flex justify-content-between">
                                    <span>{{ __('Subtotal') }}</span>
                                    <span>E£ {{ number_format($lastSale->subtotal, 2) }}</span>
                                </div>
                                @if($lastSale->discount > 0)
                                    <div class="d-flex justify-content-between text-danger">
                                        <span>{{ __('Discount') }}</span>
                                        <span>- E£ {{ number_format($lastSale->discount, 2) }}</span>
                                    </div>
                                @endif
                                <div class="d-flex justify-content-between fw-bold fs-5 mt-2">
                                    <span>{{ __('Total') }}</span>
                                    <span>E£ {{ number_format($lastSale->total, 2) }}</span>
                                </div>

                                @if(!$lastSale->is_credit)
                                    @if($lastSale->payments->count() > 0)
                                        <div class="mt-2 pt-2 border-top border-light">
                                            @foreach($lastSale->payments as $payment)
                                                <div class="d-flex justify-content-between small text-muted">
                                                    <span>{{ $payment->paymentMethod->localized_name ?? '-' }}</span>
                                                    <span>E£ {{ number_format($payment->amount, 2) }}</span>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    <div class="d-flex justify-content-between small mt-2 border-top pt-1">
                                        <span class="fw-bold">{{ __('Total Paid') }}</span>
                                        <span class="fw-bold">E£ {{ number_format($lastSale->paid, 2) }}</span>
                                    </div>
                                    @if($lastSale->change > 0)
                                        <div class="d-flex justify-content-between small">
                                            <span>{{ __('Change') }}</span>
                                            <span>E£ {{ number_format($lastSale->change, 2) }}</span>
                                        </div>
                                    @endif
                                @else
                                    <div class="mt-3 p-2 bg-light rounded small">
                                        <div class="d-flex justify-content-between">
                                            <span>{{ __('Previous Balance') }}:</span>
                                            <span>E£ {{ number_format(($lastSale->partner->current_balance ?? 0) - $lastSale->total, 2) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between fw-bold">
                                            <span>{{ __('New Balance') }}:</span>
                                            <span>E£ {{ number_format($lastSale->partner->current_balance ?? 0, 2) }}</span>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <hr>

                            <div class="text-center small">
                                <p class="mb-0">{{ __('Thank you for your purchase!') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" wire:click="closeReceipt">
                            {{ __('Close') }}
                        </button>
                        <a href="{{ route('pdf.sale.invoice', ['sale' => $lastSale->id]) }}" class="btn btn-outline-info">
                            <i class="fas fa-download me-2"></i>{{ __('Download PDF') }}
                        </a>
                        <a href="{{ route('pdf.sale.invoice', ['sale' => $lastSale->id, 'preview' => true]) }}" target="_blank" class="btn btn-primary">
                            <i class="fas fa-print me-2"></i>{{ __('Print (A4)') }}
                        </a>
                        <button type="button" class="btn btn-secondary" onclick="printReceipt()">
                            <i class="fas fa-receipt me-2"></i>{{ __('Receipt') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Partner Selection Modal -->
    @if($showPartnerModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Select Customer') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showPartnerModal', false)"></button>
                    </div>
                    <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                        <div class="d-flex gap-2 mb-3">
                            <input type="text" class="form-control" placeholder="{{ __('Search customers...') }}" wire:model.live.debounce.300ms="search">
                            <button class="btn btn-success" wire:click="$set('showNewPartnerModal', true)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <div class="list-group">
                            @foreach($this->partners as $partner)
                                <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                        wire:click="selectPartner({{ $partner->id }})">
                                    <div>
                                        <strong>{{ $partner->name }}</strong>
                                        <small class="text-muted ms-2">{{ $partner->phone }}</small>
                                    </div>
                                    @if($partner->current_balance > 0)
                                        <span class="badge bg-danger">
                                            {{ __('Owes') }}: E£ {{ number_format($partner->current_balance, 2) }}
                                        </span>
                                    @elseif($partner->current_balance < 0)
                                        <span class="badge bg-success">
                                            {{ __('Credit') }}: E£ {{ number_format(abs($partner->current_balance), 2) }}
                                        </span>
                                    @else
                                        <span class="badge bg-success">{{ __('Clear') }}</span>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Session Open Modal -->
    @if($showSessionModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Open POS Session') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showSessionModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('Opening Cash Balance') }}</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">E£</span>
                                <input type="number" step="0.01" min="0" class="form-control" 
                                       id="opening-balance" value="0">
                            </div>
                            <small class="text-muted">{{ __('Count the cash in your drawer') }}</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showSessionModal', false)">
                            {{ __('Cancel') }}
                        </button>
                        <button type="button" class="btn btn-primary" 
                                onclick="Livewire.dispatch('openSession', [parseFloat(document.getElementById('opening-balance').value) || 0])">
                            <i class="fas fa-play me-2"></i>{{ __('Start Session') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Session Close Modal -->
    @if($showCloseSessionModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-warning text-dark">
                        <h5 class="modal-title"><i class="fas fa-stop-circle me-2"></i>{{ __('Close Session') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showCloseSessionModal', false)"></button>
                    </div>
                    <div class="modal-body overflow-auto" style="max-height: 80vh;">
                        @if (session()->has('success') && $currentSession && $currentSession->status === 'closed')
                            <div class="text-center py-4">
                                <i class="fas fa-check-circle text-success mb-3" style="font-size: 4rem;"></i>
                                <h4 class="text-success">{{ __('Session Closed Successfully') }}</h4>
                                <p class="text-muted">{{ __('All transactions have been recorded in the journal.') }}</p>
                                
                                <div class="mt-4 p-4 bg-light rounded text-start mx-auto" style="max-width: 600px;">
                                    <h6 class="border-bottom pb-2 mb-3 text-uppercase small fw-bold">{{ __('Final Session Summary') }}</h6>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Total Sales') }}:</span>
                                        <span class="fw-bold">E£ {{ number_format($sessionSummary['total_sales'] ?? 0, 2) }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Expected Cash') }}:</span>
                                        <span class="fw-bold text-muted">E£ {{ number_format($sessionSummary['expected_cash'] ?? 0, 2) }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Actual Cash') }}:</span>
                                        <span class="fw-bold text-primary">E£ {{ number_format((float)$closingCash, 2) }}</span>
                                    </div>
                                    @php
                                        $finalDiff = floatval($closingCash) - ($sessionSummary['expected_cash'] ?? 0);
                                    @endphp
                                    <div class="d-flex justify-content-between border-top pt-2 mt-2">
                                        <span>{{ __('Difference') }}:</span>
                                        <span class="fw-bold {{ abs($finalDiff) < 0.01 ? 'text-success' : 'text-danger' }}">
                                            E£ {{ number_format($finalDiff, 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @else
                            @if (session()->has('error'))
                                <div class="alert alert-danger shadow-sm border-0 mb-4">
                                    <i class="fas fa-exclamation-circle me-2"></i>
                                    {{ session('error') }}
                                </div>
                            @endif

                            <div class="alert alert-warning shadow-sm border-0 mb-4">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {{ __('Ensure you have counted all cash in the drawer before closing.') }}
                            </div>

                            <div class="row g-4 mb-4">
                                <div class="col-md-7">
                                    <h6 class="mb-3 text-muted text-uppercase small fw-bold">{{ __('Financial Summary') }}</h6>
                                    <div class="card h-100 bg-light border-0">
                                        <div class="card-body p-0">
                                            <table class="table table-sm table-borderless mb-0">
                                                <tbody>
                                                    <tr class="border-bottom">
                                                        <td class="py-2 px-3">{{ __('Opening Balance') }}</td>
                                                        <td class="py-2 px-3 text-end fw-bold">E£ {{ number_format($sessionSummary['opening_balance'] ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr class="border-bottom">
                                                        <td class="py-2 px-3 text-success">{{ __('(+) Cash In') }}</td>
                                                        <td class="py-2 px-3 text-end text-success fw-bold">E£ {{ number_format($sessionSummary['cash_in'] ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr class="border-bottom">
                                                        <td class="py-2 px-3 text-danger">{{ __('(-) Cash Out') }}</td>
                                                        <td class="py-2 px-3 text-end text-danger fw-bold">E£ {{ number_format($sessionSummary['cash_out'] ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr class="border-bottom">
                                                        <td class="py-2 px-3">{{ __('(+) Cash Sales') }}</td>
                                                        <td class="py-2 px-3 text-end fw-bold">E£ {{ number_format($sessionSummary['cash_sales'] ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr class="bg-white">
                                                        <td class="py-3 px-3 fw-bold fs-6">{{ __('Expected Cash in Drawer') }}</td>
                                                        <td class="py-3 px-3 text-end fw-bold fs-6 text-primary">E£ {{ number_format($sessionSummary['expected_cash'] ?? 0, 2) }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <h6 class="mb-3 text-muted text-uppercase small fw-bold">{{ __('Verification') }}</h6>
                                    <div class="card border-primary shadow-sm h-100">
                                        <div class="card-body d-flex flex-column justify-content-center">
                                            <label class="form-label fw-bold text-primary fs-5 mb-3 text-center">{{ __('Enter Actual Cash Count') }}</label>
                                            <div class="input-group input-group-lg">
                                                <span class="input-group-text bg-primary text-white border-primary">E£</span>
                                                <input type="number" step="0.01" min="0" class="form-control border-primary text-center fw-bold" 
                                                       wire:model.live="closingCash" placeholder="0.00" autofocus>
                                            </div>
                                            
                                            @php
                                                $diffVal = floatval($closingCash) - ($sessionSummary['expected_cash'] ?? 0);
                                            @endphp
                                            
                                            @if($closingCash !== '')
                                                <div class="mt-4 p-3 rounded-3 {{ abs($diffVal) < 0.01 ? 'bg-success' : ($diffVal > 0 ? 'bg-info' : 'bg-danger') }} bg-opacity-10 text-center border-2 border-dashed {{ abs($diffVal) < 0.01 ? 'border-success' : ($diffVal > 0 ? 'border-info' : 'border-danger') }}">
                                                    <span class="fw-bold fs-4 {{ abs($diffVal) < 0.01 ? 'text-success' : ($diffVal > 0 ? 'text-info' : 'text-danger') }}">
                                                        {{ __('Difference') }}: {{ $diffVal > 0.01 ? '+' : '' }}E£ {{ number_format($diffVal, 2) }}
                                                    </span>
                                                    @if(abs($diffVal) > 0.01)
                                                        <p class="small mb-0 text-muted mt-1">
                                                            {{ $diffVal > 0 ? __('An overage will be recorded.') : __('A shortage will be recorded.') }}
                                                        </p>
                                                    @else
                                                        <p class="small mb-0 text-success mt-1"><i class="fas fa-check-circle me-1"></i>{{ __('Balanced') }}</p>
                                                    @endif
                                                </div>
                                            @endif
                                            @error('closingCash') <span class="text-danger small d-block mt-2 text-center">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-4 mt-2 mb-4">
                                <div class="col-md-12">
                                     <h6 class="mb-3 text-muted text-uppercase small fw-bold">{{ __('Other Payment Methods') }}</h6>
                                     <div class="row">
                                         <div class="col-md-6">
                                             <div class="card bg-light border-0">
                                                 <div class="card-body d-flex justify-content-between align-items-center">
                                                     <span><i class="fas fa-credit-card me-2 text-primary"></i>{{ __('Card Sales') }}</span>
                                                     <span class="fw-bold">E£ {{ number_format($sessionSummary['card_sales'] ?? 0, 2) }}</span>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="col-md-6">
                                             <div class="card bg-light border-0">
                                                 <div class="card-body d-flex justify-content-between align-items-center">
                                                     <span><i class="fas fa-user-clock me-2 text-warning"></i>{{ __('Pay Later (Add to Account)') }}</span>
                                                     <span class="fw-bold">E£ {{ number_format($sessionSummary['credit_sales'] ?? 0, 2) }}</span>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer bg-light border-top-0">
                        @if($currentSession && $currentSession->status === 'closed')
                            <button type="button" class="btn btn-lg btn-outline-primary px-4" onclick="printSessionReceipt()">
                                <i class="fas fa-print me-2"></i>{{ __('Print Receipt') }}
                            </button>
                            <button type="button" class="btn btn-lg btn-primary px-5" wire:click="dismissClosedSession">
                                {{ __('Done') }}
                            </button>
                        @else
                            <button type="button" class="btn btn-outline-secondary px-4" wire:click="$set('showCloseSessionModal', false)">
                                {{ __('Cancel') }}
                            </button>
                            <button type="button" class="btn btn-warning btn-lg px-5 shadow-sm" wire:click="closeSession" 
                                    wire:loading.attr="disabled"
                                    @if($closingCash === '') disabled @endif>
                                <span wire:loading.remove wire:target="closeSession"><i class="fas fa-lock me-2"></i>{{ __('Confirm & Close Session') }}</span>
                                <span wire:loading wire:target="closeSession"><i class="fas fa-spinner fa-spin me-2"></i>{{ __('Closing...') }}</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Session Receipt Details (Hidden by default, used for printing) -->
        <div id="session-receipt-print" class="d-none d-print-block">
            <div class="text-center mb-4">
                <h3>{{ $shopName }}</h3>
                <p>{{ __('Session Report') }}</p>
                <p class="small">{{ $currentSession->closed_at ? $currentSession->closed_at->format('Y-m-d H:i') : now()->format('Y-m-d H:i') }}</p>
                <div class="border-top border-bottom py-2 my-2">
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Opened By') }}:</span>
                        <span>{{ $currentSession->user->name ?? '-' }}</span>
                    </div>
                     <div class="d-flex justify-content-between">
                        <span>{{ __('Opened At') }}:</span>
                        <span>{{ $currentSession->opened_at->format('H:i') }}</span>
                    </div>
                </div>
            </div>

            <h6 class="border-bottom pb-1 mb-2">{{ __('Sales Summary') }}</h6>
            <div class="mb-3">
                 <div class="d-flex justify-content-between">
                    <span>{{ __('Cash Sales') }} ({{ $sessionSummary['cash_sales_count'] ?? 0 }})</span>
                    <span>{{ number_format($sessionSummary['cash_sales'] ?? 0, 2) }}</span>
                </div>
                 <div class="d-flex justify-content-between">
                    <span>{{ __('Card Sales') }} ({{ $sessionSummary['card_sales_count'] ?? 0 }})</span>
                    <span>{{ number_format($sessionSummary['card_sales'] ?? 0, 2) }}</span>
                </div>
                 <div class="d-flex justify-content-between">
                    <span>{{ __('Pay Later (Account)') }} ({{ $sessionSummary['credit_sales_count'] ?? 0 }})</span>
                    <span>{{ number_format($sessionSummary['credit_sales'] ?? 0, 2) }}</span>
                </div>
                 <div class="d-flex justify-content-between fw-bold mt-1 pt-1 border-top">
                    <span>{{ __('Total Sales') }}</span>
                    <span>{{ number_format($sessionSummary['total_sales'] ?? 0, 2) }}</span>
                </div>
            </div>

            <h6 class="border-bottom pb-1 mb-2">{{ __('Cash Reconciliation') }}</h6>
            <div class="mb-3">
                 <div class="d-flex justify-content-between">
                    <span>{{ __('Opening Balance') }}</span>
                    <span>{{ number_format($sessionSummary['opening_balance'] ?? 0, 2) }}</span>
                </div>
                
                @if(isset($sessionSummary['cash_in_transactions']) && count($sessionSummary['cash_in_transactions']) > 0)
                    <div class="mt-1 small fw-bold text-success">{{ __('Cash In') }}:</div>
                    @foreach($sessionSummary['cash_in_transactions'] as $tx)
                        <div class="d-flex justify-content-between ps-2 small">
                            <span>- {{ $tx->reason ?: __('No reason') }}</span>
                            <span>+ {{ number_format($tx->amount, 2) }}</span>
                        </div>
                    @endforeach
                @else
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Cash In') }}</span>
                        <span>0.00</span>
                    </div>
                @endif

                @if(isset($sessionSummary['cash_out_transactions']) && count($sessionSummary['cash_out_transactions']) > 0)
                    <div class="mt-1 small fw-bold text-danger">{{ __('Cash Out') }}:</div>
                    @foreach($sessionSummary['cash_out_transactions'] as $tx)
                        <div class="d-flex justify-content-between ps-2 small">
                            <span>- {{ $tx->reason ?: __('No reason') }}</span>
                            <span>- {{ number_format($tx->amount, 2) }}</span>
                        </div>
                    @endforeach
                @else
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Cash Out') }}</span>
                        <span>0.00</span>
                    </div>
                @endif

                <div class="d-flex justify-content-between fw-bold border-top mt-1 pt-1">
                    <span>{{ __('Expected Cash') }}</span>
                    <span>{{ number_format($sessionSummary['expected_cash'] ?? 0, 2) }}</span>
                </div>

                @if($currentSession->status === 'closed')
                    <div class="d-flex justify-content-between fw-bold mt-2">
                        <span>{{ __('Actual Count') }}</span>
                        <span>{{ number_format($currentSession->actual_cash, 2) }}</span>
                    </div>
                    @php $receiptDiff = $currentSession->actual_cash - $currentSession->expected_cash; @endphp
                    <div class="d-flex justify-content-between fw-bold {{ abs($receiptDiff) > 0.01 ? 'text-danger' : 'text-success' }}">
                        <span>{{ __('Difference') }}</span>
                        <span>{{ $receiptDiff > 0.01 ? '+' : '' }}{{ number_format($receiptDiff, 2) }}</span>
                    </div>
                @endif
            </div>
            
            <div class="mt-5 pt-3 border-top">
                <div class="d-flex justify-content-between">
                    <span>{{ __('Signature') }}:</span>
                    <span>___________________</span>
                </div>
            </div>
        </div>

    @endif

    <script>
        function printReceipt() {
            var receiptContent = document.getElementById('receipt-print');
            if (!receiptContent) {
                alert('Receipt content not found.');
                return;
            }

            var printWindow = window.open('', '_blank', 'width=400,height=600');
            printWindow.document.write('<html><head><title>Print Receipt</title>');
            printWindow.document.write('<style>body{font-family:monospace;padding:10px;} .text-center{text-align:center;} .d-flex{display:flex;justify-content:space-between;}</style>');
            printWindow.document.write('</head><body>');
            printWindow.document.write(receiptContent.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.focus();
            setTimeout(function() {
                printWindow.print();
                printWindow.close();
            }, 500);
        }

        function printSessionReceipt() {
            var sessionReceipt = document.getElementById('session-receipt-print');
            if (!sessionReceipt) {
                alert('Session receipt not found.');
                return;
            }

            var printWindow = window.open('', '_blank', 'width=500,height=700,scrollbars=yes');
            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>Session Report</title>
                    <style>
                        body {
                            font-family: 'Courier New', monospace;
                            font-size: 12px;
                            margin: 15px;
                            padding: 0;
                            color: #000;
                            background: #fff;
                        }
                        .d-flex { display: flex; }
                        .justify-content-between { justify-content: space-between; }
                        .fw-bold { font-weight: bold; }
                        .text-center { text-align: center; }
                        .text-muted { color: #555; }
                        .small { font-size: 10px; }
                        .border-top { border-top: 1px dashed #000; }
                        .border-bottom { border-bottom: 1px dashed #000; }
                        .py-2 { padding: 5px 0; }
                        .my-2 { margin: 5px 0; }
                        .mb-3 { margin-bottom: 10px; }
                        .mb-4 { margin-bottom: 15px; }
                        .mt-5 { margin-top: 20px; }
                        .pt-3 { padding-top: 10px; }
                        .pb-1 { padding-bottom: 3px; }
                        .mb-2 { margin-bottom: 5px; }
                        h3 { margin: 0; font-size: 16px; }
                        h6 { margin: 0; font-size: 13px; }
                        p { margin: 2px 0; font-size: 11px; }
                        @media print { body { margin: 0; } }
                    </style>
                </head>
                <body>
                    ${sessionReceipt.innerHTML}
                </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.focus();
            setTimeout(function() {
                printWindow.print();
                printWindow.close();
            }, 500);
        }
    </script>

    <!-- Cash Drawer Modal -->
    @if($showCashDrawerModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header {{ $cashType === 'in' ? 'bg-success' : 'bg-danger' }} text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-{{ $cashType === 'in' ? 'plus' : 'minus' }}-circle me-2"></i>
                            {{ $cashType === 'in' ? __('Cash In') : __('Cash Out') }}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" wire:click="$set('showCashDrawerModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('Amount') }}</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">E£</span>
                                <input type="number" step="0.01" min="0" class="form-control" 
                                       wire:model="cashAmount" placeholder="0.00">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('Reason') }}</label>
                            <input type="text" class="form-control" wire:model="cashReason" 
                                   placeholder="{{ $cashType === 'in' ? __('e.g., Opening float, deposit') : __('e.g., Petty cash, bank deposit') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showCashDrawerModal', false)">
                            {{ __('Cancel') }}
                        </button>
                        <button type="button" class="btn {{ $cashType === 'in' ? 'btn-success' : 'btn-danger' }}" wire:click="processCashTransaction">
                            <i class="fas fa-check me-2"></i>{{ __('Record') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Settlement Modal -->
    @if($showSettlementModal && $settlementPartnerId)
        @php
            $settlementPartner = \App\Models\Partner::find($settlementPartnerId);
        @endphp
        @if($settlementPartner)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title"><i class="fas fa-hand-holding-usd me-2"></i>{{ __('Receive Payment') }}</h5>
                        <button type="button" class="btn-close btn-close-white" wire:click="$set('showSettlementModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <h5>{{ $settlementPartner->name }}</h5>
                            <div class="text-danger fs-4">
                                {{ __('Outstanding Balance') }}: E£ {{ number_format($settlementPartner->current_balance, 2) }}
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Payment Amount') }}</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">E£</span>
                                <input type="number" step="0.01" min="0" 
                                       max="{{ $settlementPartner->current_balance }}"
                                       class="form-control" wire:model="settlementAmount">
                            </div>
                        </div>

                        <div class="d-flex gap-2 mb-3">
                            <button type="button" class="btn btn-outline-secondary flex-grow-1"
                                    wire:click="$set('settlementAmount', '{{ $settlementPartner->current_balance }}')">
                                {{ __('Full Amount') }}
                            </button>
                            <button type="button" class="btn btn-outline-secondary flex-grow-1"
                                    wire:click="$set('settlementAmount', '{{ $settlementPartner->current_balance / 2 }}')">
                                {{ __('Half') }}
                            </button>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Payment Method') }}</label>
                            <select wire:model="settlementPaymentMethodId" class="form-select">
                                @foreach($paymentMethods as $method)
                                    <option value="{{ $method->id }}">{{ $method->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Notes') }} ({{ __('Optional') }})</label>
                            <textarea wire:model="settlementNotes" class="form-control" rows="2" 
                                      placeholder="{{ __('Payment notes...') }}"></textarea>
                        </div>

                        @if(floatval($settlementAmount) > 0)
                            <div class="alert alert-info">
                                <div class="d-flex justify-content-between">
                                    <span>{{ __('New Balance') }}:</span>
                                    <strong>E£ {{ number_format(max(0, $settlementPartner->current_balance - floatval($settlementAmount)), 2) }}</strong>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="closeSettlementModal">
                            {{ __('Cancel') }}
                        </button>
                        <button type="button" class="btn btn-success" wire:click="processSettlement">
                            <i class="fas fa-check me-2"></i>{{ __('Receive Payment') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif
    @endif

    <!-- New Partner Modal -->
    @if($showNewPartnerModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); z-index: 1060;">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('New Customer') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showNewPartnerModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label required">{{ __('Name') }}</label>
                            <input type="text" class="form-control" wire:model="newPartnerName">
                            @error('newPartnerName') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('Phone') }}</label>
                            <input type="text" class="form-control" wire:model="newPartnerPhone">
                            @error('newPartnerPhone') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showNewPartnerModal', false)">{{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-primary" wire:click="saveNewPartner">{{ __('Save & Select') }}</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Quick PO Modal -->
    @if($showQuickPoModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); z-index: 1060;">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title"><i class="fas fa-shipping-fast me-2"></i>{{ __('Quick Purchase Order') }}</h5>
                        <button type="button" class="btn-close btn-close-white" wire:click="$set('showQuickPoModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label required">{{ __('Supplier') }}</label>
                                <div class="input-group">
                                    <select class="form-select @error('poSupplierId') is-invalid @enderror" wire:model="poSupplierId">
                                        <option value="">{{ __('Select Supplier...') }}</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                        @endforeach
                                    </select>
                                    <button class="btn btn-success" wire:click="$set('showNewSupplierModal', true)">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                                @error('poSupplierId') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">{{ __('Category') }}</label>
                                <select class="form-select @error('poCategoryId') is-invalid @enderror" wire:model="poCategoryId">
                                    <option value="">{{ __('Select Category...') }}</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->localized_name }}</option>
                                    @endforeach
                                </select>
                                @error('poCategoryId') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-5">
                                <label class="form-label required">{{ __('Product Name') }}</label>
                                <input type="text" class="form-control @error('poProductName') is-invalid @enderror" wire:model="poProductName" placeholder="e.g. New Battery">
                                @error('poProductName') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">{{ __('SKU / Barcode') }}</label>
                                <input type="text" class="form-control @error('poProductSku') is-invalid @enderror" wire:model="poProductSku" placeholder="Auto">
                                @error('poProductSku') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label required">{{ __('Cost Price') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">E£</span>
                                    <input type="number" step="0.01" class="form-control @error('poProductCost') is-invalid @enderror" wire:model="poProductCost">
                                </div>
                                @error('poProductCost') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">{{ __('Selling Price') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">E£</span>
                                    <input type="number" step="0.01" class="form-control @error('poProductPrice') is-invalid @enderror" wire:model="poProductPrice">
                                </div>
                                @error('poProductPrice') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label required">{{ __('Quantity') }}</label>
                                <input type="number" min="1" class="form-control @error('poProductQty') is-invalid @enderror" wire:model="poProductQty">
                                @error('poProductQty') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="alert alert-warning mt-3 mb-0">
                            <small>
                                <i class="fas fa-info-circle me-1"></i>
                                {{ __('This will create a new product, a received Purchase Order for the supplier, update inventory immediately, and record a Journal Entry.') }}
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showQuickPoModal', false)">{{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-info text-white" wire:click="saveQuickPo">
                            <i class="fas fa-save me-2"></i>{{ __('Create & Purchase') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- New Supplier Modal -->
    @if($showNewSupplierModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); z-index: 1070;">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('New Supplier') }}</h5>
                        <button type="button" class="btn-close" wire:click="$set('showNewSupplierModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label required">{{ __('Name') }}</label>
                            <input type="text" class="form-control" wire:model="newSupplierName">
                            @error('newSupplierName') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('Phone') }}</label>
                            <input type="text" class="form-control" wire:model="newSupplierPhone">
                            @error('newSupplierPhone') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showNewSupplierModal', false)">{{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-primary" wire:click="saveNewSupplier">{{ __('Save & Select') }}</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <style>
        .pos-container {
            height: calc(100vh - 60px); /* Fill entire dashboard space minus header */
            width: 100%;
            overflow: hidden;
            background: #f8f9fa;
        }
        
        .pos-topbar {
            display: none; /* Deprecated */
        }
        
        .pos-header {
            height: 70px;
            z-index: 1000;
        }

        .pos-header .btn {
            height: 42px;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .letter-spacing-1 {
            letter-spacing: 1px;
        }

        .pos-layout {
            display: flex;
            height: calc(100vh - 70px);
            overflow: hidden;
        }
        
        .pos-products {
            width: 60%;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
            border-right: 1px solid #dee2e6;
            background: #fff;
        }
        
        .pos-search {
            padding: 1.5rem 1.5rem 1rem 1.5rem;
            background: #fff;
            margin: 0;
        }
        
        .pos-categories {
            display: flex;
            gap: 0.5rem;
            padding: 0 1.5rem 1rem 1.5rem;
            background: #fff;
            margin: 0;
            overflow-x: auto;
            white-space: nowrap;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .pos-products-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.5rem;
            overflow-y: auto;
            padding: 1.5rem;
        }
        
        .pos-product-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            padding: 0.75rem;
            cursor: pointer;
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }
        
        .pos-product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }
        
        .pos-product-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 0.25rem;
            margin-bottom: 0.5rem;
        }
        
        .pos-product-placeholder {
            width: 100%;
            height: 100px;
            background: #e9ecef;
            border-radius: 0.25rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #adb5bd;
        }
        
        .pos-product-info {
            flex: 1;
        }
        
        .pos-product-name {
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .pos-product-price {
            font-weight: bold;
            color: #0d6efd;
        }
        
        .pos-product-stock {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
        }
        
        .pos-cart {
            width: 40%;
            background: #fdfdfd;
            display: flex;
            flex-direction: column;
            border-left: 1px solid #dee2e6;
        }
        
        .pos-customer {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            background: #f8f9fa;
        }
        
        .pos-cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            background: #fff;
        }
        
        .pos-cart-item {
            background: #f8f9fa;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            border: 1px solid #e9ecef;
        }
        
        .pos-cart-totals {
            padding: 1rem;
            border-top: 1px solid #dee2e6;
            background: #f8f9fa;
        }
        
        .pos-no-products, .pos-cart-empty {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #adb5bd;
            min-height: 200px;
        }

        /* Micro-animations and Premium Styles */
        .glass-hover {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .glass-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
            background: #fff;
        }
        .transition-hover {
            transition: all 0.2s ease-in-out;
        }
        .transition-hover:hover {
            border-color: #0d6efd !important;
            background: #f8f9fa !important;
        }
        .invisible-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .invisible-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .bg-success-subtle { background-color: rgba(25, 135, 84, 0.1); }
        .bg-danger-subtle { background-color: rgba(220, 53, 69, 0.1); }
        .bg-warning-subtle { background-color: rgba(255, 193, 7, 0.1); }
        .letter-spacing-1 { letter-spacing: 1px; }

        .shadow-inner {
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
        }
        
        /* Adjust layout height to fill screen */
        .pos-layout {
            height: calc(100vh - 120px) !important; /* Total header height (TopBar + POSHeader) */
        }

        /* POS Thermal Receipt Overhaul (80mm) */
        @media print {
            /* 1. Global Reset & Hide */
            @page { margin: 0; size: auto; }
            body { margin: 0; padding: 0; height: auto; }

            /* 2. Hide EVERYTHING by default */
            * {
                visibility: hidden !important;
            }

            /* 3. Show only receipt containers and their children */
            #receipt-content, #session-receipt-print,
            #receipt-content *, #session-receipt-print *,
            .modal.show, .modal.show * {
                visibility: visible !important;
            }

            /* 4. Position receipt containers */
            #receipt-content, #session-receipt-print {
                display: block !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 80mm !important;
                margin: 0 !important;
                padding: 1mm 2mm !important;
                background: white !important;
                z-index: 99999 !important;
            }
            
            /* 5. Ensure modal is visible for printing */
            .modal.show {
                display: block !important;
                position: static !important;
                background: white !important;
            }
            
            .modal-dialog {
                position: static !important;
                margin: 0 !important;
                max-width: 80mm !important;
            }
            
            .modal-content {
                border: none !important;
                box-shadow: none !important;
            }

            /* 6. Hide specific UI elements that might leak through */
            .pos-container-main, .pos-header, .pos-layout, .pos-products, .pos-cart,
            .modal-header, .modal-footer, .btn, .alert, nav, aside, header, footer,
            .sidebar, .main-content, .main-body, .btn-close {
                display: none !important;
                visibility: hidden !important;
            }

            /* 7. Formatting Overrides for Print */
            .d-flex { display: flex !important; }
            .justify-content-between { justify-content: space-between !important; }
            .receipt { margin: 0; width: 100%; }
        }
    </style>
</div>
</div>

<script>
function printReceipt() {
    var receiptContent = document.getElementById('receipt-content');
    if (!receiptContent) {
        alert('Receipt not found.');
        return;
    }

    var printWindow = window.open('', '_blank', 'width=400,height=600,scrollbars=yes');
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Receipt</title>
            <style>
                body {
                    font-family: 'Courier New', monospace;
                    font-size: 12px;
                    margin: 10px;
                    padding: 0;
                    color: #000;
                    background: #fff;
                }
                .receipt { width: 100%; }
                .receipt-header { text-align: center; margin-bottom: 10px; }
                .receipt-header h4 { margin: 0; font-size: 16px; font-weight: bold; }
                .receipt-header p { margin: 2px 0; font-size: 11px; }
                hr { border: none; border-top: 1px dashed #000; margin: 8px 0; }
                .receipt-meta { margin-bottom: 8px; }
                .d-flex { display: flex; }
                .justify-content-between { justify-content: space-between; }
                .fw-bold { font-weight: bold; }
                .fs-5 { font-size: 14px; }
                .text-danger { color: #000; font-weight: bold; }
                .text-muted { color: #555; }
                .small { font-size: 10px; }
                table { width: 100%; border-collapse: collapse; }
                th, td { padding: 3px 2px; text-align: left; }
                th { border-bottom: 1px solid #000; font-weight: bold; }
                .text-center { text-align: center; }
                .text-end { text-align: right; }
                .receipt-totals { margin-top: 5px; }
                .mt-2 { margin-top: 5px; }
                .pt-2 { padding-top: 5px; }
                .border-top { border-top: 1px dashed #000; }
                .bg-light { background: #f0f0f0; padding: 5px; }
                .rounded { border-radius: 3px; }
                .p-2 { padding: 5px; }
                @media print {
                    body { margin: 0; }
                }
            </style>
        </head>
        <body>
            ${receiptContent.innerHTML}
        </body>
        </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(function() {
        printWindow.print();
        printWindow.close();
    }, 500);
}
</script>
