@extends('admin.layouts.app')

@section('title', 'Inventory')
@section('page-title', 'Inventory Management')

@section('content')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">Inventory</h3>
    </div>

    <div class="p-6">
        <!-- Filters -->
        <form method="GET" class="mb-4 flex gap-4">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." 
                   class="border rounded px-4 py-2 flex-1">
            @if(request('low_stock'))
                <input type="hidden" name="low_stock" value="1">
            @endif
            <button type="submit" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                Search
            </button>
            @if(!request('low_stock'))
            <a href="{{ route('admin.inventory.index', ['low_stock' => 1]) }}" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                Show Low Stock Only
            </a>
            @endif
        </form>

        <!-- Inventory Table -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Variant</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">SKU</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Current Stock</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Min Level</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($variants as $variant)
                    <tr class="{{ $variant->isLowStock() ? 'bg-red-50' : '' }}">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {{ $variant->product->name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $variant->name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $variant->sku ?? '-' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold {{ $variant->isLowStock() ? 'text-red-600' : 'text-gray-900' }}">
                            {{ $variant->stock_quantity }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $variant->min_stock_level }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs rounded-full {{ $variant->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $variant->is_active ? 'Active' : 'Inactive' }}
                            </span>
                            @if($variant->isLowStock())
                                <span class="ml-2 px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Low Stock</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="showUpdateStockModal({{ $variant->id }}, '{{ $variant->product->name }}', '{{ $variant->name }}', {{ $variant->stock_quantity }})" 
                                    class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-edit"></i> Update
                            </button>
                            <a href="{{ route('admin.inventory.history', $variant) }}" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-history"></i> History
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-gray-500">No inventory items found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $variants->links() }}
        </div>
    </div>
</div>

<!-- Update Stock Modal -->
<div id="stockModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Update Stock</h3>
            <form id="stockForm" method="POST">
                @csrf
                @method('PUT')
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Product</label>
                    <p id="modal-product" class="text-sm text-gray-600"></p>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Variant</label>
                    <p id="modal-variant" class="text-sm text-gray-600"></p>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Current Stock</label>
                    <p id="modal-current" class="text-sm text-gray-600"></p>
                </div>
                <div class="mb-4">
                    <label for="quantity" class="block text-sm font-medium text-gray-700">New Quantity *</label>
                    <input type="number" name="quantity" id="quantity" required min="0"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">
                </div>
                <div class="mb-4">
                    <label for="type" class="block text-sm font-medium text-gray-700">Update Type *</label>
                    <select name="type" id="type" required
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">
                        <option value="adjustment">Adjustment (Set to quantity)</option>
                        <option value="in">Stock In (Add to current)</option>
                        <option value="out">Stock Out (Subtract from current)</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea name="notes" id="notes" rows="2"
                              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3"></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="closeStockModal()" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                        Cancel
                    </button>
                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Update Stock
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function showUpdateStockModal(variantId, productName, variantName, currentStock) {
    document.getElementById('modal-product').textContent = productName;
    document.getElementById('modal-variant').textContent = variantName;
    document.getElementById('modal-current').textContent = currentStock;
    document.getElementById('stockForm').action = `/admin/inventory/${variantId}/stock`;
    document.getElementById('stockModal').classList.remove('hidden');
}

function closeStockModal() {
    document.getElementById('stockModal').classList.add('hidden');
}
</script>
@endpush
@endsection