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

    <x-page-header title="Suppliers" description="Manage your feed and input suppliers.">
        <x-slot:actions>
            <a href="{{ route('suppliers.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 Supplier
            </a>
        </x-slot:actions>
    </x-page-header>

    @php
        $flagged = $suppliers->where('is_flagged', true);
    @endphp

    <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
        <x-stat-card label="Total Suppliers" :value="$suppliers->count()" colour="blue" />
        <x-stat-card label="Flagged" :value="$flagged->count()" colour="{{ $flagged->count() > 0 ? 'red' : 'gray' }}" />
        <x-stat-card label="Active" :value="$suppliers->where('is_flagged', false)->count()" colour="green" />
    </div>

    @if($flagged->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">⚠️ Flagged Suppliers</p>
        <p class="text-sm text-red-700">{{ $flagged->pluck('name')->join(', ') }} — review before ordering.</p>
    </div>
    @endif

    @if($suppliers->isEmpty())
        <x-empty-state title="No suppliers 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="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-xs uppercase tracking-wider text-gray-500">
                <tr>
                    <th class="px-5 py-3 text-left">Name</th>
                    <th class="px-5 py-3 text-left">Business</th>
                    <th class="px-5 py-3 text-left">Phone</th>
                    <th class="px-5 py-3 text-right">Receipts</th>
                    <th class="px-5 py-3 text-left">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($suppliers as $supplier)
                <tr class="hover:bg-gray-50 @if($supplier->is_flagged) bg-red-50 @endif">
                    <td class="px-5 py-3">
                        <a href="{{ route('suppliers.show', $supplier) }}" class="font-medium text-primary-600 hover:underline">
                            {{ $supplier->name }}
                        </a>
                        @if($supplier->nickname)
                            <span class="ml-1 text-xs text-gray-400">({{ $supplier->nickname }})</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-gray-600">{{ $supplier->business_name ?: '—' }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ $supplier->phone ?: '—' }}</td>
                    <td class="px-5 py-3 text-right text-gray-700">{{ $supplier->receipts_count }}</td>
                    <td class="px-5 py-3">
                        @if($supplier->is_flagged)
                            <span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-800">Flagged</span>
                        @else
                            <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">OK</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-right">
                        <a href="{{ route('suppliers.edit', $supplier) }}" class="text-xs text-gray-500 hover:text-gray-700">Edit</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</x-app-layout>
