@extends('admin.layouts.app')

@section('title', 'Edit Order #' . $order->id)

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center space-x-4">
        <a href="{{ route('admin.orders.show', $order) }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Edit Order #{{ $order->id }}</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Update order details, items, and charges</p>
        </div>
    </div>

    <form action="{{ route('admin.orders.update', $order) }}" method="POST" id="orderForm">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Order Items -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Order Items</h2>
                        <button type="button" onclick="addOrderItem()" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                            <i data-lucide="plus" class="w-4 h-4 inline mr-1"></i> Add Item
                        </button>
                    </div>
                    
                    <div id="orderItems" class="space-y-4">
                        @foreach($order->items as $index => $item)
                        <div class="order-item border border-slate-200 dark:border-slate-700 rounded-xl p-4" data-index="{{ $index }}">
                            <div class="flex items-start justify-between mb-3">
                                <span class="text-sm font-medium text-slate-500">Item #{{ $index + 1 }}</span>
                                <button type="button" onclick="removeOrderItem(this)" class="p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div class="md:col-span-2">
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Product Name</label>
                                    <input type="text" name="items[{{ $index }}][product_name]" value="{{ $item->product_name }}" required
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm">
                                    <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
                                    <input type="hidden" name="items[{{ $index }}][product_id]" value="{{ $item->product_id }}">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Price (৳)</label>
                                    <input type="number" name="items[{{ $index }}][price]" value="{{ $item->price }}" step="0.01" required
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        onchange="calculateTotals()">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Quantity</label>
                                    <input type="number" name="items[{{ $index }}][quantity]" value="{{ $item->quantity }}" min="1" required
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        onchange="calculateTotals()">
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Color</label>
                                    <input type="text" name="items[{{ $index }}][color]" value="{{ $item->color }}"
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        placeholder="e.g., Red">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Size</label>
                                    <input type="text" name="items[{{ $index }}][size]" value="{{ $item->size }}"
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        placeholder="e.g., XL">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Line Total</label>
                                    <div class="px-3 py-2 bg-slate-100 dark:bg-slate-600 rounded-lg text-sm font-medium text-slate-800 dark:text-white">
                                        ৳<span class="line-total">{{ number_format($item->price * $item->quantity) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    <div class="mt-4 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
                        <div class="text-right text-sm text-slate-500">
                            Items Subtotal: <span class="font-semibold text-slate-800 dark:text-white">৳<span id="itemsSubtotal">{{ number_format($order->subtotal) }}</span></span>
                        </div>
                    </div>
                </div>

                <!-- Charges -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Charges & Discounts</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Shipping Charge (৳)</label>
                            <input type="number" name="shipping_charge" value="{{ old('shipping_charge', $order->shipping_charge) }}" step="0.01" min="0"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                onchange="calculateTotals()">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Discount (৳)</label>
                            <input type="number" name="discount" value="{{ old('discount', $order->discount) }}" step="0.01" min="0"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                onchange="calculateTotals()">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Coupon Code</label>
                            <input type="text" name="coupon_code" value="{{ old('coupon_code', $order->coupon_code) }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                placeholder="e.g., SAVE10">
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-semibold text-slate-800 dark:text-white">Order Total</span>
                            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">৳<span id="orderTotal">{{ number_format($order->total) }}</span></span>
                        </div>
                    </div>
                </div>

                <!-- Customer Information -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Customer Information</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name *</label>
                            <input type="text" name="shipping_name" value="{{ old('shipping_name', $order->shipping_name) }}" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            @error('shipping_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Phone *</label>
                            <input type="text" name="shipping_phone" value="{{ old('shipping_phone', $order->shipping_phone) }}" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            @error('shipping_phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email</label>
                            <input type="email" name="shipping_email" value="{{ old('shipping_email', $order->shipping_email) }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                        </div>
                    </div>
                </div>

                <!-- Shipping Address -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Shipping Address</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Address *</label>
                            <textarea name="shipping_address" rows="3" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">{{ old('shipping_address', $order->shipping_address) }}</textarea>
                            @error('shipping_address')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">District</label>
                                <input type="text" name="shipping_district" value="{{ old('shipping_district', $order->shipping_district) }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Area</label>
                                <input type="text" name="shipping_area" value="{{ old('shipping_area', $order->shipping_area) }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Notes -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Order Notes</h2>
                    <textarea name="notes" rows="3"
                        class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                        placeholder="Internal notes about this order">{{ old('notes', $order->notes) }}</textarea>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Order Status -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Order Status</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Status</label>
                            <select name="status" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                                <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                <option value="returned" {{ $order->status == 'returned' ? 'selected' : '' }}>Returned</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Payment Info -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Payment</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Payment Method</label>
                            <select name="payment_method" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                <option value="cod" {{ $order->payment_method == 'cod' ? 'selected' : '' }}>Cash on Delivery</option>
                                <option value="bkash" {{ $order->payment_method == 'bkash' ? 'selected' : '' }}>bKash</option>
                                <option value="nagad" {{ $order->payment_method == 'nagad' ? 'selected' : '' }}>Nagad</option>
                                <option value="rocket" {{ $order->payment_method == 'rocket' ? 'selected' : '' }}>Rocket</option>
                                <option value="bank" {{ $order->payment_method == 'bank' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="sslcommerz" {{ $order->payment_method == 'sslcommerz' ? 'selected' : '' }}>SSLCommerz</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Payment Status</label>
                            <select name="payment_status" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                <option value="pending" {{ $order->payment_status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="paid" {{ $order->payment_status == 'paid' ? 'selected' : '' }}>Paid</option>
                                <option value="failed" {{ $order->payment_status == 'failed' ? 'selected' : '' }}>Failed</option>
                                <option value="refunded" {{ $order->payment_status == 'refunded' ? 'selected' : '' }}>Refunded</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Transaction ID</label>
                            <input type="text" name="transaction_id" value="{{ old('transaction_id', $order->transaction_id) }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                placeholder="e.g., TXN123456">
                        </div>
                    </div>
                </div>

                <!-- Courier Info -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Courier</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Courier</label>
                            <select name="courier" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                <option value="">Not Assigned</option>
                                <option value="steadfast" {{ $order->courier == 'steadfast' ? 'selected' : '' }}>Steadfast</option>
                                <option value="pathao" {{ $order->courier == 'pathao' ? 'selected' : '' }}>Pathao</option>
                                <option value="redx" {{ $order->courier == 'redx' ? 'selected' : '' }}>RedX</option>
                                <option value="paperfly" {{ $order->courier == 'paperfly' ? 'selected' : '' }}>Paperfly</option>
                                <option value="ecourier" {{ $order->courier == 'ecourier' ? 'selected' : '' }}>eCourier</option>
                                <option value="sundarban" {{ $order->courier == 'sundarban' ? 'selected' : '' }}>Sundarban</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tracking ID</label>
                            <input type="text" name="tracking_id" value="{{ old('tracking_id', $order->tracking_id) }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                placeholder="e.g., SF123456789">
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-3">
                    <button type="submit" class="w-full px-4 py-3 bg-indigo-600 text-white rounded-xl font-medium hover:bg-indigo-700 transition-colors">
                        Update Order
                    </button>
                    <a href="{{ route('admin.orders.show', $order) }}" class="block w-full px-4 py-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl font-medium text-center hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Item Template (hidden) -->
<template id="orderItemTemplate">
    <div class="order-item border border-slate-200 dark:border-slate-700 rounded-xl p-4" data-index="__INDEX__">
        <div class="flex items-start justify-between mb-3">
            <span class="text-sm font-medium text-slate-500">New Item</span>
            <button type="button" onclick="removeOrderItem(this)" class="p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="md:col-span-2">
                <label class="block text-xs font-medium text-slate-500 mb-1">Product</label>
                <div class="relative">
                    <input type="text" class="product-search w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                        placeholder="Search product..." autocomplete="off" data-index="__INDEX__">
                    <div class="product-search-results hidden absolute z-10 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"></div>
                </div>
                <input type="hidden" name="items[__INDEX__][product_name]" class="product-name-input" required>
                <input type="hidden" name="items[__INDEX__][id]" value="">
                <input type="hidden" name="items[__INDEX__][product_id]" class="product-id-input" value="">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Price (৳)</label>
                <input type="number" name="items[__INDEX__][price]" value="0" step="0.01" required
                    class="price-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    onchange="calculateTotals()">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Quantity</label>
                <input type="number" name="items[__INDEX__][quantity]" value="1" min="1" required
                    class="quantity-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    onchange="calculateTotals()">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Color</label>
                <input type="text" name="items[__INDEX__][color]"
                    class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    placeholder="e.g., Red">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Size</label>
                <input type="text" name="items[__INDEX__][size]"
                    class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    placeholder="e.g., XL">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Line Total</label>
                <div class="px-3 py-2 bg-slate-100 dark:bg-slate-600 rounded-lg text-sm font-medium text-slate-800 dark:text-white">
                    ৳<span class="line-total">0</span>
                </div>
            </div>
        </div>
        <div class="selected-product hidden mt-2 p-2 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
            <p class="text-sm font-medium text-indigo-700 dark:text-indigo-300 selected-product-name"></p>
            <p class="text-xs text-indigo-600 dark:text-indigo-400">Stock: <span class="selected-product-stock"></span></p>
        </div>
    </div>
</template>

@push('scripts')
<script>
let itemIndex = {{ $order->items->count() }};
let searchTimeout = null;

function addOrderItem() {
    const template = document.getElementById('orderItemTemplate');
    const container = document.getElementById('orderItems');
    
    let html = template.innerHTML.replace(/__INDEX__/g, itemIndex);
    
    const div = document.createElement('div');
    div.innerHTML = html;
    const newItem = div.firstElementChild;
    container.appendChild(newItem);
    
    // Initialize product search for the new item
    initProductSearch(newItem.querySelector('.product-search'));
    
    itemIndex++;
    if (typeof reinitIcons !== 'undefined') reinitIcons();
    calculateTotals();
}

function removeOrderItem(btn) {
    const item = btn.closest('.order-item');
    if (document.querySelectorAll('.order-item').length > 1) {
        item.remove();
        calculateTotals();
    } else {
        alert('Order must have at least one item');
    }
}

function calculateTotals() {
    let subtotal = 0;
    
    document.querySelectorAll('.order-item').forEach(item => {
        const price = parseFloat(item.querySelector('input[name*="[price]"]').value) || 0;
        const quantity = parseInt(item.querySelector('input[name*="[quantity]"]').value) || 0;
        const lineTotal = price * quantity;
        
        item.querySelector('.line-total').textContent = lineTotal.toLocaleString();
        subtotal += lineTotal;
    });
    
    const shipping = parseFloat(document.querySelector('input[name="shipping_charge"]').value) || 0;
    const discount = parseFloat(document.querySelector('input[name="discount"]').value) || 0;
    const total = subtotal + shipping - discount;
    
    document.getElementById('itemsSubtotal').textContent = subtotal.toLocaleString();
    document.getElementById('orderTotal').textContent = total.toLocaleString();
}

function initProductSearch(input) {
    if (!input) return;
    
    const resultsDiv = input.nextElementSibling;
    const itemDiv = input.closest('.order-item');
    
    input.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (searchTimeout) clearTimeout(searchTimeout);
        
        if (query.length < 2) {
            resultsDiv.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(() => {
            searchProducts(query, resultsDiv, itemDiv);
        }, 300);
    });
    
    input.addEventListener('blur', function() {
        setTimeout(() => resultsDiv.classList.add('hidden'), 200);
    });
    
    input.addEventListener('focus', function() {
        if (this.value.trim().length >= 2) {
            resultsDiv.classList.remove('hidden');
        }
    });
}

function searchProducts(query, resultsDiv, itemDiv) {
    fetch(`/admin/products/search?q=${encodeURIComponent(query)}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(products => {
        if (products.length === 0) {
            resultsDiv.innerHTML = '<div class="p-3 text-sm text-slate-500">No products found</div>';
        } else {
            resultsDiv.innerHTML = products.map(product => `
                <div class="product-result p-3 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer border-b border-slate-100 dark:border-slate-700 last:border-0"
                    data-id="${product.id}"
                    data-name="${product.name}"
                    data-price="${product.new_price}"
                    data-stock="${product.stock}">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-sm font-medium text-slate-800 dark:text-white">${product.name}</p>
                            <p class="text-xs text-slate-500">SKU: ${product.sku || 'N/A'} | Stock: ${product.stock}</p>
                        </div>
                        <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">৳${product.new_price}</span>
                    </div>
                </div>
            `).join('');
            
            // Add click handlers
            resultsDiv.querySelectorAll('.product-result').forEach(result => {
                result.addEventListener('click', function() {
                    selectProduct(this, itemDiv);
                });
            });
        }
        resultsDiv.classList.remove('hidden');
    })
    .catch(error => {
        console.error('Search error:', error);
        resultsDiv.innerHTML = '<div class="p-3 text-sm text-red-500">Error searching products</div>';
        resultsDiv.classList.remove('hidden');
    });
}

function selectProduct(resultEl, itemDiv) {
    const id = resultEl.dataset.id;
    const name = resultEl.dataset.name;
    const price = resultEl.dataset.price;
    const stock = resultEl.dataset.stock;
    
    // Update hidden inputs
    itemDiv.querySelector('.product-name-input').value = name;
    itemDiv.querySelector('.product-id-input').value = id;
    
    // Update visible inputs
    const searchInput = itemDiv.querySelector('.product-search');
    searchInput.value = name;
    
    itemDiv.querySelector('.price-input').value = price;
    
    // Show selected product info
    const selectedDiv = itemDiv.querySelector('.selected-product');
    selectedDiv.querySelector('.selected-product-name').textContent = name;
    selectedDiv.querySelector('.selected-product-stock').textContent = stock;
    selectedDiv.classList.remove('hidden');
    
    // Hide results
    itemDiv.querySelector('.product-search-results').classList.add('hidden');
    
    // Recalculate totals
    calculateTotals();
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    calculateTotals();
    
    // Initialize product search for any existing new items
    document.querySelectorAll('.product-search').forEach(input => {
        initProductSearch(input);
    });
});
</script>
@endpush
@endsection