@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-6" x-data="posApp()" @keydown.tab.prevent="switchMode()">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Point of Sale</h1>
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-600">Scan barcode atau cari produk untuk memulai transaksi</p>
                <p class="text-sm text-gray-500 mt-1">
                    <kbd class="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg">Tab</kbd> untuk beralih mode
                </p>
            </div>
        </div>
        
        <!-- Mode Toggle -->
        <div class="mt-4 flex items-center justify-center">
            <div class="bg-gray-100 p-1 rounded-lg flex">
                <button @click="currentMode = 'scan'; focusCurrentModeInput()" 
                        :class="currentMode === 'scan' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'"
                        class="px-4 py-2 rounded-md font-medium transition-all duration-200 flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.99c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H12m0 0h.01"></path>
                    </svg>
                    <span>Mode Scan</span>
                </button>
                <button @click="currentMode = 'search'; focusCurrentModeInput()" 
                        :class="currentMode === 'search' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'"
                        class="px-4 py-2 rounded-md font-medium transition-all duration-200 flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <span>Mode Search</span>
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Product Search & Scanner -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Barcode Scanner -->
            <div x-show="currentMode === 'scan'" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="bg-white shadow rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Scanner Barcode</h3>
                <div class="space-y-4">
                    <!-- Manual Barcode Input -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <label class="block text-sm font-medium text-blue-800 mb-2">
                            <svg class="inline w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.99c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H12m0 0h.01"></path>
                            </svg>
                            Input Barcode Manual
                        </label>
                        <input type="text" 
                               x-model="barcodeInput" 
                               @keyup.enter="processBarcodeInput()"
                               @input="barcodeInput = $event.target.value"
                               @keyup.escape="barcodeInput = ''"
                               placeholder="Scan atau ketik barcode, tekan Enter untuk memproses..."
                               class="w-full px-4 py-3 border-2 border-blue-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg font-mono bg-white">
                        <div class="flex items-center justify-between mt-2">
                            <p class="text-xs text-blue-600">
                                <kbd class="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg">Enter</kbd> untuk memproses • 
                                <kbd class="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg">Esc</kbd> untuk clear
                            </p>
                            <div x-show="barcodeInput.length > 0" class="text-xs text-blue-600">
                                <span x-text="barcodeInput.length"></span> karakter
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-t pt-4">
                        <button @click="toggleScanner()" 
                                class="w-full bg-primary text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-primary">
                            <span x-text="scannerActive ? 'Stop Scanner' : 'Start Scanner'"></span>
                        </button>
                        <div id="scanner-container" x-show="scannerActive" class="relative mt-4">
                            <div id="scanner" class="w-full h-64 bg-gray-100 rounded-lg overflow-hidden"></div>
                            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                                <div class="border-2 border-red-500 w-48 h-32 rounded-lg opacity-50"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Manual Product Search -->
            <div x-show="currentMode === 'search'" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="bg-white shadow rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cari Produk</h3>
                <div class="space-y-4">
                    <div class="flex space-x-2">
                        <input type="text" 
                               x-model="searchQuery" 
                               @input.debounce.300ms="searchProducts()"
                               @keyup.enter="searchProducts()"
                               placeholder="Cari nama produk atau barcode..."
                               class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
                        <button @click="clearSearch()" 
                                x-show="searchQuery.length > 0"
                                class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600">
                            Clear
                        </button>
                    </div>
                    
                    <!-- Search Results -->
                    <div x-show="searchResults.length > 0" class="space-y-2 max-h-64 overflow-y-auto">
                        <template x-for="product in searchResults" :key="product.id">
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer"
                                 @click="addToCart(product)">
                                <div>
                                    <p class="font-medium text-gray-900" x-text="product.name"></p>
                                    <p class="text-sm text-gray-500" x-text="product.category.name"></p>
                                    <p class="text-xs text-gray-400" x-text="product.barcode"></p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-900" x-text="'Rp ' + formatNumber(product.price)"></p>
                                    <p class="text-sm text-gray-500" x-text="'Stok: ' + product.stock"></p>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shopping Cart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Keranjang Belanja</h3>
            
            <!-- Cart Items -->
            <div class="space-y-3 mb-6 max-h-96 overflow-y-auto">
                <template x-for="(item, index) in cartItems" :key="index">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex-1">
                            <p class="font-medium text-gray-900" x-text="item.name"></p>
                            <p class="text-sm text-gray-500" x-text="'Rp ' + formatNumber(item.price)"></p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button @click="updateQuantity(index, item.quantity - 1)" 
                                    class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300">
                                <span class="text-sm">-</span>
                            </button>
                            <span class="w-8 text-center" x-text="item.quantity"></span>
                            <button @click="updateQuantity(index, item.quantity + 1)" 
                                    class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300">
                                <span class="text-sm">+</span>
                            </button>
                            <button @click="removeFromCart(index)" 
                                    class="ml-2 text-red-600 hover:text-red-800">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </template>
                
                <div x-show="cartItems.length === 0" class="text-center py-8 text-gray-500">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.5 6M7 13l-1.5-6m0 0h15.5M7 13h10"></path>
                    </svg>
                    <p class="mt-2">Keranjang kosong</p>
                </div>
            </div>

            <!-- Total -->
            <div class="border-t pt-4 space-y-2">
                <div class="flex justify-between text-lg font-medium">
                    <span>Total:</span>
                    <span x-text="'Rp ' + formatNumber(totalAmount)"></span>
                </div>
            </div>

            <!-- Payment -->
            <div class="mt-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Jumlah Bayar</label>
                    <input type="number" 
                           x-model="paidAmount" 
                           @input="calculateChange()"
                           placeholder="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
                </div>
                
                <div class="flex justify-between text-sm">
                    <span>Kembalian:</span>
                    <span x-text="'Rp ' + formatNumber(changeAmount)" 
                          :class="changeAmount < 0 ? 'text-red-600' : 'text-green-600'"></span>
                </div>
                
                <button @click="processTransaction()" 
                        :disabled="cartItems.length === 0 || paidAmount < totalAmount"
                        :class="cartItems.length === 0 || paidAmount < totalAmount ? 'bg-gray-400 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700'"
                        class="w-full text-white px-4 py-3 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-green-500">
                    Proses Transaksi
                </button>
                
                <button @click="clearCart()" 
                        class="w-full bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700">
                    Clear Keranjang
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function posApp() {
    return {
        currentMode: 'scan', // 'scan' or 'search'
        scannerActive: false,
        barcodeInput: '',
        searchQuery: '',
        searchResults: [],
        cartItems: [],
        totalAmount: 0,
        paidAmount: 0,
        changeAmount: 0,
        
        init() {
            // Load saved mode preference from localStorage
            const savedMode = localStorage.getItem('pos_mode');
            if (savedMode && (savedMode === 'scan' || savedMode === 'search')) {
                this.currentMode = savedMode;
            }
            
            this.calculateTotal();
            
            // Auto focus on appropriate input when page loads
            this.$nextTick(() => {
                this.focusCurrentModeInput();
            });
        },
        
        focusCurrentModeInput() {
            this.$nextTick(() => {
                if (this.currentMode === 'scan') {
                    const barcodeInput = document.querySelector('input[x-model="barcodeInput"]');
                    if (barcodeInput) {
                        barcodeInput.focus();
                    }
                } else if (this.currentMode === 'search') {
                    const searchInput = document.querySelector('input[x-model="searchQuery"]');
                    if (searchInput) {
                        searchInput.focus();
                    }
                }
            });
        },
        
        switchMode() {
            this.currentMode = this.currentMode === 'scan' ? 'search' : 'scan';
            
            // Save mode preference to localStorage
            localStorage.setItem('pos_mode', this.currentMode);
            
            this.focusCurrentModeInput();
            
            // Show notification about mode switch
            this.showNotification(`Beralih ke ${this.currentMode === 'scan' ? 'Mode Scan' : 'Mode Search'}`, 'info');
        },
        
        async processBarcodeInput() {
            if (!this.barcodeInput.trim()) {
                return;
            }
            
            const barcode = this.barcodeInput.trim();
            
            // Show loading state
            const originalPlaceholder = document.querySelector('input[x-model="barcodeInput"]').placeholder;
            document.querySelector('input[x-model="barcodeInput"]').placeholder = 'Memproses barcode...';
            document.querySelector('input[x-model="barcodeInput"]').disabled = true;
            
            try {
                await this.searchByBarcode(barcode);
            } finally {
                // Reset input state
                document.querySelector('input[x-model="barcodeInput"]').placeholder = originalPlaceholder;
                document.querySelector('input[x-model="barcodeInput"]').disabled = false;
                this.barcodeInput = ''; // Clear input after processing
                
                // Focus back to input for next scan
                this.$nextTick(() => {
                    document.querySelector('input[x-model="barcodeInput"]').focus();
                });
            }
        },
        
        toggleScanner() {
            if (this.scannerActive) {
                this.stopScanner();
            } else {
                this.startScanner();
            }
        },
        
        startScanner() {
            this.scannerActive = true;
            this.$nextTick(() => {
                Quagga.init({
                    inputStream: {
                        name: "Live",
                        type: "LiveStream",
                        target: document.querySelector('#scanner')
                    },
                    decoder: {
                        readers: [
                            // Format Retail/Perdagangan
                            "ean_reader",        // EAN-13 (GTIN-13): 13 digit standar internasional
                            "ean_8_reader",      // EAN-8: 8 digit untuk produk retail kecil
                            "upc_reader",        // UPC-A: 12 digit standar Amerika Utara
                            "upc_e_reader",      // UPC-E: 6 digit versi kompak UPC-A
                            
                            // Format Industri/Logistik
                            "code_128_reader",   // Code 128: Alfanumerik lengkap untuk supply chain
                            "codabar_reader",    // Codabar (NW-7): Perpustakaan, bank darah, kurir
                            "i2of5_reader",      // Matrix 2 of 5 (Industrial 2 of 5): Aplikasi industri
                            
                            // Format Tambahan 1D
                            "code_39_reader",    // Code 39: Alfanumerik untuk automotive dan defense
                            "code_39_vin_reader", // Code 39 VIN: Khusus untuk Vehicle Identification Number
                            "code_93_reader",    // Code 93: Versi lebih efisien dari Code 39
                            
                            // Format Khusus
                            "2of5_reader",       // Standard 2 of 5: Format numerik standar
                            "code_11_reader"     // Code 11: Aplikasi telekomunikasi
                        ]
                    },
                    // Konfigurasi tambahan untuk Scanner Barcode X 101 U
                    locator: {
                        patchSize: "medium",
                        halfSample: true
                    },
                    numOfWorkers: 2,
                    frequency: 10
                }, (err) => {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    Quagga.start();
                });
                
                Quagga.onDetected((data) => {
                    const barcode = data.codeResult.code;
                    this.searchByBarcode(barcode);
                    this.stopScanner();
                });
            });
        },
        
        stopScanner() {
            this.scannerActive = false;
            Quagga.stop();
        },
        
        async searchByBarcode(barcode) {
            try {
                const response = await fetch(`/api/products/search-barcode?barcode=${barcode}`);
                const data = await response.json();
                
                if (data.success && data.product) {
                    this.addToCart(data.product);
                    
                    // Show success notification
                    this.showNotification(`Produk "${data.product.name}" berhasil ditambahkan ke keranjang`, 'success');
                } else {
                    this.showNotification('Produk dengan barcode ' + barcode + ' tidak ditemukan', 'error');
                }
            } catch (error) {
                console.error('Error searching barcode:', error);
                this.showNotification('Terjadi kesalahan saat mencari produk', 'error');
            }
        },
        
        async searchProducts() {
            if (!this.searchQuery.trim()) {
                this.searchResults = [];
                return;
            }
            
            // Show loading state
            this.searchResults = [];
            
            try {
                const response = await fetch(`/api/products/search?q=${encodeURIComponent(this.searchQuery)}`);
                const data = await response.json();
                
                if (data.success) {
                    this.searchResults = data.products;
                }
            } catch (error) {
                console.error('Error searching products:', error);
                this.searchResults = [];
            }
        },
        
        clearSearch() {
            this.searchQuery = '';
            this.searchResults = [];
        },
        
        addToCart(product) {
            const existingIndex = this.cartItems.findIndex(item => item.id === product.id);
            
            if (existingIndex !== -1) {
                this.updateQuantity(existingIndex, this.cartItems[existingIndex].quantity + 1);
            } else {
                this.cartItems.push({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    quantity: 1,
                    stock: product.stock,
                    track_stock: product.track_stock
                });
            }
            
            this.calculateTotal();
            this.searchResults = [];
            this.searchQuery = '';
        },
        
        updateQuantity(index, newQuantity) {
            if (newQuantity <= 0) {
                this.removeFromCart(index);
                return;
            }
            
            const item = this.cartItems[index];
            // Only check stock if product tracks stock
            if (item.track_stock && newQuantity > item.stock) {
                alert(`Stok tidak mencukupi. Stok tersedia: ${item.stock}`);
                return;
            }
            
            this.cartItems[index].quantity = newQuantity;
            this.calculateTotal();
        },
        
        removeFromCart(index) {
            this.cartItems.splice(index, 1);
            this.calculateTotal();
        },
        
        clearCart() {
            this.cartItems = [];
            this.calculateTotal();
            this.paidAmount = 0;
            this.calculateChange();
        },
        
        calculateTotal() {
            this.totalAmount = this.cartItems.reduce((total, item) => {
                return total + (item.price * item.quantity);
            }, 0);
            this.calculateChange();
        },
        
        calculateChange() {
            this.changeAmount = this.paidAmount - this.totalAmount;
        },
        
        async processTransaction() {
            if (this.cartItems.length === 0) {
                alert('Keranjang kosong');
                return;
            }
            
            if (this.paidAmount < this.totalAmount) {
                alert('Jumlah bayar kurang');
                return;
            }
            
            try {
                const response = await fetch('/api/transactions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        items: this.cartItems.map(item => ({
                            product_id: item.id,
                            quantity: item.quantity,
                            unit_price: item.price
                        })),
                        paid_amount: this.paidAmount
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    alert('Transaksi berhasil!');
                    // Open receipt in new window
                    window.open(`/transactions/${data.transaction.id}/receipt`, '_blank');
                    this.clearCart();
                } else {
                    alert('Terjadi kesalahan: ' + (data.message || 'Unknown error'));
                }
            } catch (error) {
                console.error('Error processing transaction:', error);
                alert('Terjadi kesalahan saat memproses transaksi');
            }
        },
        
        formatNumber(number) {
            return new Intl.NumberFormat('id-ID').format(number);
        },
        
        showNotification(message, type = 'info') {
            // Remove existing notifications
            const existingNotifications = document.querySelectorAll('.pos-notification');
            existingNotifications.forEach(notification => notification.remove());
            
            // Create notification element
            const notification = document.createElement('div');
            notification.className = `pos-notification fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 max-w-sm`;
            
            // Set colors based on type
            if (type === 'success') {
                notification.className += ' bg-green-500 text-white';
            } else if (type === 'error') {
                notification.className += ' bg-red-500 text-white';
            } else {
                notification.className += ' bg-blue-500 text-white';
            }
            
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <div class="flex-shrink-0">
                        ${type === 'success' ? 
                            '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' :
                            type === 'error' ? 
                            '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>' :
                            '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
                        }
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium">${message}</p>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 ml-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            // Auto remove after 3 seconds
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 3000);
        }
    }
}
</script>
@endpush
@endsection