@extends('layouts.app')

@section('title', 'Low Stock Items')
@section('page-title', 'Low Stock Items')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Low Stock Alert</h2>
                <p class="mt-1 text-sm text-gray-500">Items with quantity at or below minimum order quantity</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('stocks.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Stock
                </a>
                <a href="{{ route('stocks.create') }}" 
                   class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700">
                    <i class="fas fa-plus mr-2"></i>Add Stock
                </a>
            </div>
        </div>
    </div>

    <!-- Low Stock Items -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        @if($lowStocks->count() > 0)
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
                    <span class="text-sm font-medium text-gray-900">{{ $lowStocks->total() }} items need attention</span>
                </div>
            </div>
            
            <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 tracking-wider">
                            Product
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Supplier
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Current Stock
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Min. Order Qty
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($lowStocks as $stock)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-lg bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-box text-gray-400"></i>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ $stock->product_name }}</div>
                                        <div class="text-sm text-gray-500">{{ $stock->product_code }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $stock->supplier->business_name }}</div>
                                <div class="text-sm text-gray-500">{{ $stock->supplier->contact_person }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">
                                    {{ number_format($stock->available_quantity, 2) }} {{ $stock->unit }}
                                </div>
                                @if($stock->available_quantity <= 0)
                                    <div class="text-xs text-red-600 font-medium">Out of Stock</div>
                                @elseif($stock->available_quantity <= $stock->minimum_order_quantity * 0.5)
                                    <div class="text-xs text-red-600 font-medium">Critical Low</div>
                                @else
                                    <div class="text-xs text-yellow-600 font-medium">Low Stock</div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ number_format($stock->minimum_order_quantity, 2) }} {{ $stock->unit }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($stock->available_quantity <= 0)
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                        <i class="fas fa-times-circle mr-1"></i>Out of Stock
                                    </span>
                                @elseif($stock->available_quantity <= $stock->minimum_order_quantity * 0.5)
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>Critical
                                    </span>
                                @else
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>Low
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="{{ route('stocks.show', $stock) }}" 
                                       class="text-primary-600 hover:text-primary-900">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('stocks.edit', $stock) }}" 
                                       class="text-yellow-600 hover:text-yellow-900">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button onclick="quickUpdateQuantity({{ $stock->id }}, '{{ $stock->product_name }}', {{ $stock->available_quantity }})" 
                                            class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-plus-minus"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination -->
            @if($lowStocks->hasPages())
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="flex-1 flex justify-between sm:hidden">
                        {{ $lowStocks->links('pagination::simple-tailwind') }}
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Showing {{ $lowStocks->firstItem() }} to {{ $lowStocks->lastItem() }} of {{ $lowStocks->total() }} results
                            </p>
                        </div>
                        <div>
                            {{ $lowStocks->links() }}
                        </div>
                    </div>
                </div>
            @endif
        @else
            <div class="text-center py-12">
                <i class="fas fa-check-circle text-green-400 text-6xl mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900 mb-2">All stock levels are healthy!</h3>
                <p class="text-gray-500 mb-4">No items are currently below their minimum order quantities.</p>
                <a href="{{ route('stocks.index') }}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                    <i class="fas fa-boxes mr-2"></i>
                    View All Stock
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Quick Update Modal -->
<div id="quickUpdateModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="quickUpdateForm" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Quick Stock Update</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Product</label>
                            <p id="modalProductName" class="text-gray-900 font-medium"></p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Current Quantity</label>
                            <p id="modalCurrentQuantity" class="text-lg font-semibold text-gray-900"></p>
                        </div>
                        <div>
                            <label for="modalAction" class="block text-sm font-medium text-gray-700">Action</label>
                            <select name="action" id="modalAction" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                <option value="add">Add to current quantity</option>
                                <option value="set">Set exact quantity</option>
                            </select>
                        </div>
                        <div>
                            <label for="modalQuantity" class="block text-sm font-medium text-gray-700">Quantity</label>
                            <input type="number" name="quantity" id="modalQuantity" step="0.01" min="0" required
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                        Update Stock
                    </button>
                    <button type="button" onclick="closeQuickUpdateModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function quickUpdateQuantity(stockId, productName, currentQuantity) {
    document.getElementById('modalProductName').textContent = productName;
    document.getElementById('modalCurrentQuantity').textContent = currentQuantity;
    document.getElementById('quickUpdateForm').action = `/stocks/${stockId}/update-quantity`;
    document.getElementById('quickUpdateModal').classList.remove('hidden');
}

function closeQuickUpdateModal() {
    document.getElementById('quickUpdateModal').classList.add('hidden');
}
</script>
@endsection