@extends('admin.layouts.app')
@section('title', $outlet->name)
@section('page-title', $outlet->name)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Products -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-lg">Products</h3>
            <select id="category-filter" class="border rounded-lg px-3 py-2 text-sm">
                <option value="">All Categories</option>
                @foreach($products as $category => $items)
                <option value="{{ $category }}">{{ $category ?: 'Uncategorized' }}</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-h-[500px] overflow-y-auto">
            @forelse($products as $category => $items)
                @foreach($items as $product)
                <button onclick="addToCart({{ $product->id }}, '{{ $product->name }}', {{ $product->price }})"
                        class="product-btn p-4 border rounded-xl text-left hover:border-gold hover:shadow-md transition"
                        data-category="{{ $category }}">
                    <p class="font-medium text-navy">{{ $product->name }}</p>
                    <p class="text-gold font-bold mt-1">₦ {{ number_format($product->price, 0) }}</p>
                    @if($product->stock_quantity > 0)
                        <p class="text-xs text-gray-400 mt-1">Stock: {{ $product->stock_quantity }}</p>
                    @else
                        <p class="text-xs text-red-500 mt-1">Out of Stock</p>
                    @endif
                </button>
                @endforeach
            @empty
            <p class="col-span-3 text-center text-gray-500 py-8">No products available</p>
            @endforelse
        </div>
    </div>

    <!-- Cart -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-lg mb-4">Current Order</h3>
        
        <form id="pos-form" action="{{ route('pos.transaction') }}" method="POST">
            @csrf
            <input type="hidden" name="outlet_id" value="{{ $outlet->id }}">
            
            <div id="cart-items" class="space-y-3 max-h-[300px] overflow-y-auto mb-4">
                <p class="text-gray-400 text-center py-8">No items in cart</p>
            </div>

            <div class="border-t pt-4 space-y-2">
                <div class="flex justify-between">
                    <span class="text-gray-600">Subtotal</span>
                    <span id="subtotal" class="font-semibold">₦ 0</span>
                </div>
                <div class="flex justify-between text-lg">
                    <span class="font-bold">Total</span>
                    <span id="total" class="font-bold text-gold">₦ 0</span>
                </div>
            </div>

            <div class="mt-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Customer Type</label>
                    <div class="flex gap-4">
                        <label class="flex items-center">
                            <input type="radio" name="customer_type" value="walkin" checked class="mr-2">
                            Walk-in
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="customer_type" value="guest" class="mr-2">
                            In-house Guest
                        </label>
                    </div>
                </div>

                <div id="walkin-fields">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Customer Name</label>
                    <input type="text" name="customer_name" class="w-full border rounded-lg px-4 py-2">
                </div>

                <div id="guest-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Guest</label>
                    <select name="booking_id" class="w-full border rounded-lg px-4 py-2">
                        <option value="">Select guest...</option>
                        @foreach($activeBookings as $booking)
                        <option value="{{ $booking->id }}">{{ $booking->guest_name }} - {{ $booking->room?->room_number }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                    <select name="payment_method" id="payment-method" class="w-full border rounded-lg px-4 py-2" required>
                        <option value="cash">Cash</option>
                        <option value="transfer">Bank Transfer</option>
                        <option value="pos">POS</option>
                        <option value="card">Card</option>
                    </select>
                </div>

                <div id="cash-fields">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount Paid</label>
                    <input type="number" name="amount_paid" id="amount-paid" class="w-full border rounded-lg px-4 py-2" min="0">
                </div>

                <div id="change-display" class="hidden text-center p-4 bg-green-50 rounded-lg">
                    <p class="text-sm text-gray-600">Change</p>
                    <p id="change-amount" class="text-2xl font-bold text-green-600">₦ 0</p>
                </div>

                <button type="submit" class="w-full bg-gold text-white py-3 rounded-lg font-semibold hover:bg-gold-dark transition">
                    Complete Sale
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
let cart = [];

function addToCart(id, name, price) {
    const existing = cart.find(item => item.id === id);
    if (existing) {
        existing.quantity++;
    } else {
        cart.push({ id, name, price, quantity: 1 });
    }
    updateCart();
}

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

function updateQuantity(id, change) {
    const item = cart.find(i => i.id === id);
    if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
            removeFromCart(id);
        } else {
            updateCart();
        }
    }
}

function updateCart() {
    const container = document.getElementById('cart-items');
    
    if (cart.length === 0) {
        container.innerHTML = '<p class="text-gray-400 text-center py-8">No items in cart</p>';
        document.getElementById('subtotal').textContent = '₦ 0';
        document.getElementById('total').textContent = '₦ 0';
        return;
    }

    container.innerHTML = cart.map(item => `
        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div class="flex-1">
                <p class="font-medium">${item.name}</p>
                <p class="text-sm text-gray-500">₦ ${item.price.toLocaleString()}</p>
            </div>
            <div class="flex items-center gap-2">
                <button onclick="updateQuantity(${item.id}, -1)" class="w-8 h-8 bg-gray-200 rounded">-</button>
                <span class="w-8 text-center">${item.quantity}</span>
                <button onclick="updateQuantity(${item.id}, 1)" class="w-8 h-8 bg-gray-200 rounded">+</button>
                <button onclick="removeFromCart(${item.id})" class="text-red-500 ml-2"><i class="fas fa-trash"></i></button>
            </div>
        </div>
    `).join('');

    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    document.getElementById('subtotal').textContent = `₦ ${subtotal.toLocaleString()}`;
    document.getElementById('total').textContent = `₦ ${subtotal.toLocaleString()}`;
    document.getElementById('amount-paid').min = subtotal;
    document.getElementById('amount-paid').value = subtotal;
}

document.querySelectorAll('input[name="customer_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('walkin-fields').classList.toggle('hidden', this.value !== 'walkin');
        document.getElementById('guest-fields').classList.toggle('hidden', this.value !== 'guest');
    });
});

document.getElementById('amount-paid').addEventListener('input', function() {
    const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const change = this.value - total;
    const changeDisplay = document.getElementById('change-display');
    
    if (change >= 0 && this.value > 0) {
        changeDisplay.classList.remove('hidden');
        document.getElementById('change-amount').textContent = `₦ ${change.toLocaleString()}`;
    } else {
        changeDisplay.classList.add('hidden');
    }
});

document.getElementById('pos-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (cart.length === 0) {
        alert('Please add items to cart');
        return;
    }

    const formData = new FormData(this);
    
    cart.forEach((item, index) => {
        formData.append(`items[${index}][product_id]`, item.id);
        formData.append(`items[${index}][quantity]`, item.quantity);
    });

    fetch(this.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Transaction completed successfully!\nInvoice: ' + data.transaction.invoice_number);
            window.location.href = '{{ route("pos.receipt", "") }}/' + data.transaction.id;
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Transaction failed');
    });
});
</script>
@endpush