<x-app-layout>
    <x-slot:heading>Inventory</x-slot:heading>

    <x-page-header title="Feed & Input Inventory" description="Track stock levels of all farm inputs.">
        <x-slot:actions>
            <a href="{{ route('inventory.create') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">
                + Add Item
            </a>
        </x-slot:actions>
    </x-page-header>

    <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
        <x-stat-card label="Total Items" :value="$items->count()" colour="blue" />
        <x-stat-card label="Below Reorder" :value="$belowReorder->count()" colour="{{ $belowReorder->count() > 0 ? 'red' : 'gray' }}" />
        <x-stat-card label="Stock Value" value="₦{{ number_format($totalValue) }}" colour="green" />
    </div>

    @if($belowReorder->isNotEmpty())
    <div class="mb-5 rounded-xl border border-red-200 bg-red-50 p-4">
        <p class="font-semibold text-red-800 mb-1">⚠️ Low Stock Alert</p>
        <p class="text-sm text-red-700">{{ $belowReorder->pluck('item_name')->join(', ') }}</p>
    </div>
    @endif

    @if($items->isEmpty())
        <x-empty-state title="No inventory items yet">
            <x-slot:icon><svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-x-auto">
        <table class="w-full min-w-[700px] text-sm">
            <thead class="bg-gray-50 text-xs uppercase tracking-wider text-gray-500">
                <tr>
                    <th class="px-5 py-3 text-left">Item</th>
                    <th class="px-5 py-3 text-left">Category</th>
                    <th class="px-5 py-3 text-right">Current Stock</th>
                    <th class="px-5 py-3 text-right">Reorder At</th>
                    <th class="px-5 py-3 text-right">Unit Cost</th>
                    <th class="px-5 py-3 text-right">Stock Value</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($items as $item)
                <tr class="hover:bg-gray-50 @if($item->isBelowReorder()) bg-red-50 @endif">
                    <td class="px-5 py-3">
                        <a href="{{ route('inventory.show', $item) }}" class="font-medium text-primary-600 hover:underline">
                            {{ $item->item_name }}
                        </a>
                        @if($item->isBelowReorder())
                        <span class="ml-1 rounded-full bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700">Low</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 capitalize text-gray-600">{{ str_replace('_',' ',$item->category) }}</td>
                    <td class="px-5 py-3 text-right font-semibold @if($item->isBelowReorder()) text-red-700 @else text-gray-900 @endif">
                        {{ number_format($item->current_stock, 2) }} {{ $item->unit }}
                    </td>
                    <td class="px-5 py-3 text-right text-gray-500">{{ number_format($item->reorder_threshold, 2) }}</td>
                    <td class="px-5 py-3 text-right text-gray-600">{{ $item->unit_cost_naira ? '₦' . number_format($item->unit_cost_naira) : '—' }}</td>
                    <td class="px-5 py-3 text-right text-gray-900 font-medium">{{ $item->unit_cost_naira ? '₦' . number_format($item->stock_value) : '—' }}</td>
                    <td class="px-5 py-3">
                        <div class="flex items-center justify-end gap-3"
                             x-data="{
                                 open: false,
                                 t: 0, r: 0,
                                 toggle(e) {
                                     let rect = e.currentTarget.getBoundingClientRect();
                                     this.t = rect.bottom + 6;
                                     this.r = window.innerWidth - rect.right;
                                     this.open = !this.open;
                                 }
                             }">
                            <a href="{{ route('inventory.show', $item) }}" class="text-xs text-gray-500 hover:text-gray-700 hover:underline">History</a>
                            <button @click="toggle($event)" class="text-xs font-medium text-primary-600 hover:underline">+ Stock</button>
                            <div x-show="open"
                                 @click.outside="open=false"
                                 x-transition
                                 :style="`position:fixed;top:${t}px;right:${r}px;z-index:9999`"
                                 class="w-72 rounded-xl bg-white shadow-xl ring-1 ring-gray-200 p-4">
                                <div class="mb-3 flex items-center justify-between">
                                    <p class="text-xs font-semibold text-gray-700">Add Stock Receipt</p>
                                    <button type="button" @click="open=false" class="text-gray-400 hover:text-gray-600">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>
                                <form method="POST" action="{{ route('inventory.receipt', $item) }}" class="space-y-2">
                                    @csrf
                                    <input type="number" name="quantity" step="0.01" min="0.01" placeholder="Quantity received" required
                                           class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                    <input type="number" name="unit_cost_naira" step="0.01" min="0" placeholder="Unit cost ₦ (optional)"
                                           class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                    <select name="supplier_id"
                                            class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                        <option value="">— Supplier (optional) —</option>
                                        @foreach($suppliers as $s)
                                            <option value="{{ $s->id }}">{{ $s->name }}{{ $s->is_flagged ? ' ⚑' : '' }}</option>
                                        @endforeach
                                    </select>
                                    <button type="submit" class="w-full rounded-lg bg-primary-600 py-2 text-sm font-medium text-white hover:bg-primary-700">
                                        Confirm Receipt
                                    </button>
                                </form>
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</x-app-layout>
