@extends('layouts.admin')
@section('title','Food Items')
@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="text-cream/50 text-sm">Total: {{ $foods->total() }}</div>
    <a href="{{ route('admin.food-items.create') }}" class="btn-primary">
        <i class="fas fa-plus"></i>Add Food Item
    </a>
</div>

<form method="GET" class="admin-card p-4 mb-5 flex flex-wrap gap-3">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search food..." class="form-input flex-1 min-w-40">
    <select name="category_id" class="form-input w-auto">
        <option value="">All Categories</option>
        @foreach($categories as $cat)
        <option value="{{ $cat->id }}" {{ request('category_id')==$cat->id?'selected':'' }}>{{ $cat->name }}</option>
        @endforeach
    </select>
    <select name="status" class="form-input w-auto">
        <option value="">All Status</option>
        <option value="active" {{ request('status')==='active'?'selected':'' }}>Available</option>
        <option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Unavailable</option>
    </select>
    <button type="submit" class="btn-primary"><i class="fas fa-search"></i>Search</button>
</form>

<div class="admin-card overflow-hidden">
    <table>
        <thead><tr>
            <th>Item</th><th>Category</th><th>Price</th><th>Badges</th><th>Status</th><th>Actions</th>
        </tr></thead>
        <tbody>
            @forelse($foods as $food)
            <tr>
                <td>
                    <div class="flex items-center gap-3">
                        <img src="{{ $food->thumbnail_url }}" alt="{{ $food->name }}"
                             class="w-10 h-10 rounded-lg object-cover border border-gold/20">
                        <div>
                            <div class="font-medium text-cream text-sm">{{ $food->name }}</div>
                            @if($food->name_bn)<div class="text-cream/40 text-xs">{{ $food->name_bn }}</div>@endif
                        </div>
                    </div>
                </td>
                <td class="text-sm text-cream/70">{{ $food->category->name }}</td>
                <td class="text-sm">
                    <span class="text-gold font-semibold">৳{{ number_format($food->effective_price,0) }}</span>
                    @if($food->discount_price)
                    <span class="text-cream/40 line-through text-xs ml-1">৳{{ number_format($food->base_price,0) }}</span>
                    @endif
                </td>
                <td>
                    <div class="flex flex-wrap gap-1">
                        @if($food->is_bestseller)<span class="badge badge-yellow">Best</span>@endif
                        @if($food->is_featured)<span class="badge badge-blue">Featured</span>@endif
                        @if($food->is_new)<span class="badge badge-green">New</span>@endif
                        @if($food->is_halal)<span class="badge badge-green">Halal</span>@endif
                    </div>
                </td>
                <td>
                    <button onclick="toggleAvail({{ $food->id }},this)"
                            class="badge {{ $food->is_available ? 'badge-green':'badge-red' }}" id="avail-{{ $food->id }}">
                        {{ $food->is_available ? 'Available':'Unavailable' }}
                    </button>
                </td>
                <td>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.food-items.edit', $food) }}"
                           class="w-7 h-7 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-gold transition-colors">
                            <i class="fas fa-edit text-xs"></i>
                        </a>
                        <form method="POST" action="{{ route('admin.food-items.destroy', $food) }}" onsubmit="return confirm('Delete this food item?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="w-7 h-7 rounded-lg bg-red-500/20 hover:bg-red-500/30 flex items-center justify-center text-red-400 transition-colors">
                                <i class="fas fa-trash text-xs"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="text-center text-cream/40 py-10">No food items found.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="p-4 border-t border-gold/10">{{ $foods->withQueryString()->links() }}</div>
</div>

@push('scripts')
<script>
function toggleAvail(id, btn) {
    axios.patch(`/admin/food-items/${id}/toggle`).then(r => {
        const badge = document.getElementById('avail-'+id);
        if (r.data.is_available) {
            badge.className = 'badge badge-green';
            badge.textContent = 'Available';
        } else {
            badge.className = 'badge badge-red';
            badge.textContent = 'Unavailable';
        }
    });
}
</script>
@endpush
@endsection