@extends('layouts.cashier')

@section('content')
<div class="container mx-auto" x-data="posSystem()" x-init="init()">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Point of Sale</h1>
        <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-600" id="current-time"></span>
            <span class="text-sm font-semibold text-green-600">
                @if (Auth::guard('cashier')->check())
                    {{ Auth::guard('cashier')->user()->name }}
                @elseif (Auth::guard('admin')->check())  {{-- admin/login using default guard --}}
                    {{ Auth::guard('admin')->user()->name }}
                @endif
            </span>
        </div>
    </div>

    <!-- Debug Information - Remove in production -->
    <div class="bg-yellow-100 border border-yellow-400 rounded-lg p-4 mb-4">
        <div class="flex items-center">
            <i class="fas fa-bug text-yellow-600 mr-2"></i>
            <span class="font-semibold">Debug Info:</span>
        </div>
        <div class="mt-2 text-sm">
            <p>Products Loaded: <span id="debug-product-count">{{ count($products) }}</span></p>
            <p>Customers Loaded: <span id="debug-customer-count">{{ count($customers) }}</span></p>
            <p>Alpine.js Status: <span id="alpine-status">Initializing...</span></p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Product Search and Selection -->
        <div class="lg:col-span-2">
            <!-- Product Search -->
            <div class="bg-white rounded-lg shadow-lg p-4 mb-6">
                <div class="flex space-x-4">
                    <div class="flex-1">
                        <input type="text"
                               x-model="searchTerm"
                               @input.debounce.500ms="searchProducts()"
                               placeholder="Search products by name or code..."
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                    </div>
                    <button @click="clearSearch()"
                            class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
                        Clear
                    </button>
                </div>

                <!-- Search Results Info -->
                <div class="mt-2 text-sm text-gray-600" x-show="searchTerm">
                    <span x-text="`Searching for: ${searchTerm}`"></span>
                    <span x-show="!loading" x-text="` - ${filteredProducts.length} products found`"></span>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="bg-white rounded-lg shadow-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Products</h3>
                    <span class="text-sm text-gray-600" x-text="`${filteredProducts.length} products available`"></span>
                </div>

                <!-- Loading State -->
                <div x-show="loading" class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-2xl text-green-600"></i>
                    <p class="text-gray-600 mt-2">Loading products...</p>
                </div>

                <!-- Products Grid -->
                <div x-show="!loading && filteredProducts.length > 0"
                     class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
                     id="products-grid">
                    <template x-for="product in filteredProducts" :key="product.id">
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer bg-white"
                             @click="addToCart(product)"
                             :class="{'opacity-50 cursor-not-allowed': product.quantity_in_stock <= 0}"
                             :title="product.quantity_in_stock <= 0 ? 'Out of stock' : 'Click to add to cart'">

                            <!-- Stock Badge -->
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-gray-800 text-sm" x-text="product.product_name"></h4>
                                <span class="text-xs px-2 py-1 rounded-full"
                                      :class="product.quantity_in_stock > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                                      x-text="product.quantity_in_stock > 0 ? 'In Stock' : 'Out of Stock'">
                                </span>
                            </div>

                            <p class="text-xs text-gray-600 mb-2" x-text="'Code: ' + product.product_code"></p>

                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs text-gray-500 capitalize" x-text="product.product_type"></span>
                                <span class="text-sm font-semibold text-green-600"
                                      x-text="'Rs.' + parseFloat(product.price_per_unit).toFixed(2)"></span>
                            </div>

                            <div class="flex justify-between items-center text-xs">
                                <span class="text-gray-500" x-text="'Stock: ' + product.quantity_in_stock"></span>
                                <span class="text-gray-500" x-text="product.unit"></span>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- No Products Message -->
                <div x-show="!loading && filteredProducts.length === 0 && !searchTerm"
                     class="text-center py-8">
                    <i class="fas fa-box-open text-4xl text-gray-400 mb-4"></i>
                    <p class="text-gray-500">No products available</p>
                    <p class="text-gray-400 text-sm mt-2">Contact admin to add products to the system</p>
                </div>

                <!-- No Search Results Message -->
                <div x-show="!loading && filteredProducts.length === 0 && searchTerm"
                     class="text-center py-8">
                    <i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
                    <p class="text-gray-500">No products found for "<span x-text="searchTerm"></span>"</p>
                    <p class="text-gray-400 text-sm mt-2">Try a different search term</p>
                </div>
            </div>
        </div>

        <!-- Right Column - Cart and Checkout -->
        <div class="space-y-6">
            <!-- Customer Selection - Optional -->
            <div class="bg-white rounded-lg shadow-lg p-4">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Customer (Optional)</h3>
                <div class="space-y-3">
                    <select x-model="selectedCustomerId" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="">Walk-in Customer</option>
                        <template x-for="customer in customers" :key="customer.id">
                            <option :value="customer.id"
                                    x-text="customer.name + (customer.phone ? ' - ' + customer.phone : '')">
                            </option>
                        </template>
                    </select>
                    <button @click="showCustomerModal = true"
                            class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm transition-colors">
                        <i class="fas fa-plus mr-2"></i>Add New Customer
                    </button>
                </div>
            </div>

            <!-- Shopping Cart -->
            <div class="bg-white rounded-lg shadow-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Cart</h3>
                    <span class="text-sm text-gray-600" x-text="`${cart.length} items`"></span>
                </div>

                <!-- Cart Items -->
                <div class="space-y-3 max-h-64 overflow-y-auto" id="cart-items">
                    <template x-for="(item, index) in cart" :key="item.id + '-' + index">
                        <div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
                            <div class="flex justify-between items-start mb-2">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-sm" x-text="item.product_name"></h4>
                                    <p class="text-xs text-gray-600" x-text="item.product_code"></p>
                                </div>
                                <button @click="removeFromCart(index)"
                                        class="text-red-500 hover:text-red-700 ml-2">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- Quantity/Weight Input -->
                            <template x-if="item.product_type === 'Loose Weight'">
                                <div class="space-y-2">
                                    <label class="text-xs text-gray-600">Weight (kg)</label>
                                    <input type="number"
                                           x-model="item.weight"
                                           @change="updateItemTotal(item)"
                                           step="0.1"
                                           min="0.1"
                                           class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                </div>
                            </template>

                            <template x-if="item.product_type === 'Standard Bag'">
                                <div class="space-y-2">
                                    <label class="text-xs text-gray-600">Quantity</label>
                                    <div class="flex items-center space-x-2">
                                        <button @click="decrementQuantity(item)"
                                                class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center hover:bg-gray-300">
                                            <i class="fas fa-minus text-xs"></i>
                                        </button>
                                        <span x-text="item.quantity" class="text-sm font-semibold min-w-8 text-center"></span>
                                        <button @click="incrementQuantity(item)"
                                                class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center hover:bg-gray-300">
                                            <i class="fas fa-plus text-xs"></i>
                                        </button>
                                    </div>
                                </div>
                            </template>

                            <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-200">
                                <span class="text-xs text-gray-600"
                                      x-text="'Rs.' + parseFloat(item.unit_price).toFixed(2) + ' each'"></span>
                                <span class="font-semibold text-green-600 text-sm"
                                      x-text="'Rs.' + parseFloat(item.total_price).toFixed(2)"></span>
                            </div>
                        </div>
                    </template>

                    <!-- Empty Cart -->
                    <div x-show="cart.length === 0" class="text-center py-8">
                        <i class="fas fa-shopping-cart text-4xl text-gray-400 mb-4"></i>
                        <p class="text-gray-500 text-sm">Cart is empty</p>
                        <p class="text-gray-400 text-xs">Add products from the left</p>
                    </div>
                </div>

                <!-- Cart Summary -->
                <div x-show="cart.length > 0" class="mt-4 space-y-2 border-t pt-4">
                    <div class="flex justify-between text-sm">
                        <span>Subtotal:</span>
                        <span x-text="'Rs.' + cartSubtotal.toFixed(2)"></span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span>Discount:</span>
                        <div class="flex items-center space-x-2">
                            <span>Rs.</span>
                            <input type="number"
                                   x-model="discount"
                                   @change="calculateTotal()"
                                   step="0.01"
                                   min="0"
                                   :max="cartSubtotal"
                                   class="w-20 text-right border-b border-gray-300 focus:outline-none focus:border-green-500">
                        </div>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span>Tax:</span>
                        <span x-text="'Rs.' + tax.toFixed(2)"></span>
                    </div>
                    <div class="flex justify-between text-lg font-bold border-t pt-2">
                        <span>Total:</span>
                        <span x-text="'Rs.' + cartTotal.toFixed(2)"></span>
                    </div>
                </div>
            </div>

            <!-- Payment Section -->
            <div x-show="cart.length > 0" class="bg-white rounded-lg shadow-lg p-4">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Payment</h3>

                <!-- Payment Method -->
                <div class="space-y-3 mb-4">
                    <label class="block text-sm font-medium text-gray-700">Payment Method</label>
                    <div class="grid grid-cols-3 gap-2">
                        <template x-for="method in paymentMethods" :key="method.value">
                            <button @click="selectedPaymentMethod = method.value"
                                    :class="selectedPaymentMethod === method.value ?
                                           'bg-green-500 text-white border-green-600' :
                                           'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-300'"
                                    class="py-2 rounded-lg text-sm font-medium transition-colors border">
                                <i :class="method.icon" class="mr-1"></i>
                                <span x-text="method.label"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <!-- Notes -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                    <textarea x-model="notes"
                              rows="2"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm"
                              placeholder="Add any notes for this sale..."></textarea>
                </div>

                <!-- Checkout Button -->
                <button @click="processSale()"
                        :disabled="processingSale || cart.length === 0"
                        :class="processingSale || cart.length === 0 ?
                               'bg-gray-400 cursor-not-allowed' :
                               'bg-green-600 hover:bg-green-700'"
                        class="w-full text-white py-3 rounded-lg font-semibold text-lg transition-colors">
                    <span x-show="!processingSale">
                        <i class="fas fa-check-circle mr-2"></i>
                        Complete Sale
                    </span>
                    <span x-show="processingSale">
                        <i class="fas fa-spinner fa-spin mr-2"></i>
                        Processing...
                    </span>
                </button>
            </div>
        </div>
    </div>

    <!-- Customer Modal -->
    <div x-show="showCustomerModal"
         x-cloak
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Add New Customer</h3>

            <form @submit.prevent="createCustomer()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Name *</label>
                        <input type="text" x-model="newCustomer.name" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Email (Optional)</label>
                        <input type="email" x-model="newCustomer.email"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Phone (Optional)</label>
                        <input type="tel" x-model="newCustomer.phone"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Address (Optional)</label>
                        <textarea x-model="newCustomer.address" rows="3"
                                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button"
                            @click="showCustomerModal = false; newCustomer = { name: '', email: '', phone: '', address: '' }"
                            class="px-4 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg">
                        Cancel
                    </button>
                    <button type="submit"
                            :disabled="creatingCustomer"
                            :class="creatingCustomer ? 'bg-gray-400 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700'"
                            class="text-white px-4 py-2 rounded-lg">
                        <span x-show="!creatingCustomer">Create Customer</span>
                        <span x-show="creatingCustomer">Creating...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
[x-cloak] { display: none !important; }
</style>

<script>
function posSystem() {
    return {
        // State
        searchTerm: '',
        products: @json($products),
        filteredProducts: [],
        customers: @json($customers),
        cart: [],
        selectedCustomerId: '',
        selectedPaymentMethod: 'cash',
        discount: 0,
        tax: 0,
        notes: '',
        loading: false,
        processingSale: false,
        creatingCustomer: false,
        showCustomerModal: false,
        newCustomer: {
            name: '',
            email: '',
            phone: '',
            address: ''
        },

        // Payment Methods
        paymentMethods: [
            { value: 'cash', label: 'Cash', icon: 'fas fa-money-bill-wave' },
            { value: 'card', label: 'Card', icon: 'fas fa-credit-card' },
            { value: 'mobile_money', label: 'Mobile', icon: 'fas fa-mobile-alt' }
        ],

        // Initialize
        init() {
            console.log('POS System Initialized');
            console.log('Products:', this.products);
            console.log('Customers:', this.customers);

            // Set initial filtered products
            this.filteredProducts = this.products;
            this.loading = false;

            // Update debug status
            document.getElementById('alpine-status').textContent = 'Initialized Successfully';

            // Force Alpine.js to update the UI
            this.$nextTick(() => {
                console.log('Alpine.js UI updated');
            });
        },

        // Computed Properties
        get cartSubtotal() {
            return this.cart.reduce((sum, item) => sum + parseFloat(item.total_price || 0), 0);
        },

        get cartTotal() {
            return this.cartSubtotal - parseFloat(this.discount || 0) + parseFloat(this.tax || 0);
        },

        // Methods
        searchProducts() {
            if (this.searchTerm.trim() === '') {
                this.filteredProducts = this.products;
                return;
            }

            this.loading = true;
            const searchTerm = this.searchTerm.toLowerCase();

            // Client-side filtering
            setTimeout(() => {
                this.filteredProducts = this.products.filter(product =>
                    product.product_name.toLowerCase().includes(searchTerm) ||
                    product.product_code.toLowerCase().includes(searchTerm)
                );
                this.loading = false;
            }, 300);
        },

        clearSearch() {
            this.searchTerm = '';
            this.filteredProducts = this.products;
        },

        addToCart(product) {
            if (product.quantity_in_stock <= 0) {
                alert('This product is out of stock!');
                return;
            }

            const existingItem = this.cart.find(item => item.id === product.id);

            if (existingItem) {
                if (product.product_type === 'Standard Bag') {
                    existingItem.quantity += 1;
                    this.updateItemTotal(existingItem);
                } else {
                    // For loose weight, create new item
                    const newItem = this.createCartItem(product);
                    this.cart.push(newItem);
                }
                return;
            }

            const newItem = this.createCartItem(product);
            this.cart.push(newItem);
        },

        createCartItem(product) {
            const item = {
                id: product.id,
                product_id: product.id,
                product_name: product.product_name,
                product_code: product.product_code,
                product_type: product.product_type,
                unit_price: parseFloat(product.price_per_unit),
                quantity: product.product_type === 'Standard Bag' ? 1 : 0,
                weight: product.product_type === 'Loose Weight' ? 1 : null,
                total_price: 0
            };

            this.updateItemTotal(item);
            return item;
        },

        removeFromCart(index) {
            this.cart.splice(index, 1);
            this.calculateTotal();
        },

        incrementQuantity(item) {
            item.quantity += 1;
            this.updateItemTotal(item);
        },

        decrementQuantity(item) {
            if (item.quantity > 1) {
                item.quantity -= 1;
                this.updateItemTotal(item);
            }
        },

        updateItemTotal(item) {
            if (item.product_type === 'Loose Weight' && item.weight) {
                item.total_price = parseFloat(item.weight) * parseFloat(item.unit_price);
            } else {
                item.total_price = parseFloat(item.quantity) * parseFloat(item.unit_price);
            }
            this.calculateTotal();
        },

        calculateTotal() {
            // You can add tax calculation logic here
            this.tax = 0; // For now, no tax
        },

        async processSale() {
            if (this.cart.length === 0) {
                alert('Please add items to the cart before processing sale.');
                return;
            }

            this.processingSale = true;

            const saleData = {
                items: this.cart.map(item => ({
                    product_id: item.product_id,
                    quantity: item.product_type === 'Standard Bag' ? item.quantity : item.weight,
                    weight: item.product_type === 'Loose Weight' ? item.weight : null
                })),
                customer_id: this.selectedCustomerId || null, // Customer is optional
                payment_method: this.selectedPaymentMethod,
                discount: parseFloat(this.discount) || 0,
                notes: this.notes
            };

            try {
                const response = await fetch('{{ route("cashier.pos.process-sale") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(saleData)
                });

                const result = await response.json();

                if (result.success) {
                    // Redirect to receipt
                    window.location.href = `{{ url('cashier/pos/receipt') }}/${result.sale_id}`;
                } else {
                    alert('Error: ' + result.message);
                }
            } catch (error) {
                alert('An error occurred while processing the sale: ' + error.message);
            } finally {
                this.processingSale = false;
            }
        },

        async createCustomer() {
            if (!this.newCustomer.name.trim()) {
                alert('Customer name is required');
                return;
            }

            this.creatingCustomer = true;

            try {
                const response = await fetch('{{ route("cashier.pos.create-customer") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(this.newCustomer)
                });

                const result = await response.json();

                if (result.success) {
                    this.customers.push(result.customer);
                    this.selectedCustomerId = result.customer.id;
                    this.showCustomerModal = false;
                    this.newCustomer = { name: '', email: '', phone: '', address: '' };
                    alert('Customer created successfully!');
                } else {
                    alert('Error creating customer: ' + (result.message || 'Unknown error'));
                }
            } catch (error) {
                alert('An error occurred while creating the customer: ' + error.message);
            } finally {
                this.creatingCustomer = false;
            }
        }
    };
}

// Update current time
function updateTime() {
    const now = new Date();
    document.getElementById('current-time').textContent =
        now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
updateTime();

// Check if Alpine.js is loaded
document.addEventListener('alpine:init', () => {
    console.log('Alpine.js is initialized');
    document.getElementById('alpine-status').textContent = 'Alpine.js Loaded';
});
</script>
<script src="//unpkg.com/alpinejs" defer></script>
@endsection