@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Inventory Allocations</h1>
            <p class="text-gray-600 mt-1">Manage inventory allocations to leads</p>
        </div>
        <a href="{{ route('inventory.allocations.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            <i class="fas fa-plus mr-2"></i> New Allocation
        </a>
    </div>

    <!-- Search and Filters -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form method="GET" action="{{ route('inventory.allocations') }}" class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <input type="text" name="search" placeholder="Search by lead company..." value="{{ request('search') }}" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <select name="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Status</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="allocated" {{ request('status') === 'allocated' ? 'selected' : '' }}>Allocated</option>
                <option value="returned" {{ request('status') === 'returned' ? 'selected' : '' }}>Returned</option>
                <option value="damaged" {{ request('status') === 'damaged' ? 'selected' : '' }}>Damaged</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
                <i class="fas fa-search mr-2"></i> Search
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50">
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Lead</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Item</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Quantity</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Status</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Allocated Date</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($allocations as $allocation)
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition">
                    <td class="px-6 py-4">
                        @if($allocation->lead)
                        <a href="{{ route('leads.show', $allocation->lead) }}" class="text-blue-600 hover:text-blue-700 font-medium">
                            {{ $allocation->lead->company_name }}
                        </a>
                        @else
                        <span class="text-gray-500">Deleted Lead</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        @if($allocation->item)
                        <a href="{{ route('inventory.items.show', $allocation->item) }}" class="text-blue-600 hover:text-blue-700 font-medium">
                            {{ $allocation->item->name }}
                        </a>
                        @else
                        <span class="text-gray-500">Deleted Item</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm font-semibold">
                            {{ $allocation->quantity_allocated }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold
                            @if($allocation->status === 'pending') bg-yellow-100 text-yellow-800
                            @elseif($allocation->status === 'allocated') bg-green-100 text-green-800
                            @elseif($allocation->status === 'returned') bg-blue-100 text-blue-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ ucfirst($allocation->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-gray-600 text-sm">
                        {{ $allocation->created_at->format('M d, Y') }}
                    </td>
                    <td class="px-6 py-4 text-sm flex gap-2">
                        <a href="{{ route('inventory.allocations.show', $allocation) }}" class="text-blue-600 hover:text-blue-700">
                            <i class="fas fa-eye mr-1"></i> View
                        </a>
                        <form method="POST" action="{{ route('inventory.allocations.destroy', $allocation) }}" style="display: inline;" onsubmit="return confirm('Are you sure?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-700">
                                <i class="fas fa-trash mr-1"></i> Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl text-gray-300 mb-3 block"></i>
                        <p class="text-lg">No allocations found</p>
                        <a href="{{ route('inventory.allocations.create') }}" class="text-blue-600 hover:text-blue-700 mt-3 inline-block">
                            Create the first allocation <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $allocations->links() }}
    </div>
</div>
@endsection