@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="mb-4">
                    @include('stock.nav', ['tab' => 'full-history'])
                </div>

                <div class="max-w-2xl mx-auto">
                    <h2 class="text-lg font-semibold mb-4">Select a Product to View Stock History</h2>
                    
                    @if(session('errors'))
                        <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm">
                            {{ session('errors')->first() }}
                        </div>
                    @endif

                    <form method="GET" action="{{ route('pos.stock.full-summary') }}" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Search Product</label>
                            <input type="text" 
                                   id="product-search" 
                                   placeholder="Type to search by name, barcode, or SKU..."
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                   autocomplete="off">
                            <input type="hidden" name="product_id" id="selected-product-id">
                        </div>

                        <div id="search-results" class="border rounded-md max-h-80 overflow-y-auto" style="display: none;">
                        </div>

                        <div id="selected-product" class="p-3 bg-green-50 border border-green-200 rounded-md" style="display: none;">
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="font-medium text-green-800" id="selected-product-name"></span>
                                    <span class="text-sm text-green-600 ml-2" id="selected-product-barcode"></span>
                                </div>
                                <button type="button" onclick="clearSelection()" class="text-green-600 hover:text-green-800">
                                    ✕ Clear
                                </button>
                            </div>
                        </div>

                        <button type="submit" 
                                id="view-history-btn"
                                disabled
                                class="w-full px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
                            View Stock History
                        </button>
                    </form>

                    <div class="mt-8">
                        <h3 class="text-sm font-medium text-gray-500 mb-3">Or select from recent products:</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-96 overflow-y-auto">
                            @foreach($products->take(20) as $product)
                                <a href="{{ route('pos.stock.full-summary', ['product_id' => $product->id]) }}"
                                   class="p-3 border rounded-md hover:bg-gray-50 flex justify-between items-center">
                                    <span class="font-medium text-gray-900">{{ $product->name }}</span>
                                    <span class="text-sm text-gray-500">{{ $product->barcode ?: $product->sku }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const products = @json($products);
const searchInput = document.getElementById('product-search');
const resultsDiv = document.getElementById('search-results');
const selectedDiv = document.getElementById('selected-product');
const selectedIdInput = document.getElementById('selected-product-id');
const submitBtn = document.getElementById('view-history-btn');

searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase().trim();
    
    if (query.length < 1) {
        resultsDiv.style.display = 'none';
        return;
    }

    const matches = products.filter(p => 
        (p.name && p.name.toLowerCase().includes(query)) ||
        (p.barcode && p.barcode.toLowerCase().includes(query)) ||
        (p.sku && p.sku.toLowerCase().includes(query))
    ).slice(0, 20);

    if (matches.length === 0) {
        resultsDiv.innerHTML = '<div class="p-3 text-gray-500 text-sm">No products found</div>';
    } else {
        resultsDiv.innerHTML = matches.map(p => `
            <div class="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0" 
                 onclick="selectProduct(${p.id}, '${escapeHtml(p.name)}', '${escapeHtml(p.barcode || p.sku || '')}')">
                <div class="font-medium text-gray-900">${escapeHtml(p.name)}</div>
                <div class="text-sm text-gray-500">${escapeHtml(p.barcode || p.sku || 'No barcode')}</div>
            </div>
        `).join('');
    }
    resultsDiv.style.display = 'block';
});

function selectProduct(id, name, barcode) {
    selectedIdInput.value = id;
    document.getElementById('selected-product-name').textContent = name;
    document.getElementById('selected-product-barcode').textContent = barcode;
    selectedDiv.style.display = 'block';
    resultsDiv.style.display = 'none';
    searchInput.value = '';
    submitBtn.disabled = false;
}

function clearSelection() {
    selectedIdInput.value = '';
    selectedDiv.style.display = 'none';
    submitBtn.disabled = true;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Close results when clicking outside
document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target) && !resultsDiv.contains(e.target)) {
        resultsDiv.style.display = 'none';
    }
});
</script>
@endsection