@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto mt-10 bg-white p-8 rounded-2xl shadow-xl">
    <!-- Header -->
    <div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
        <h1 class="text-3xl font-extrabold text-gray-800">🍽 Foods</h1>
        <a href="{{ route('foods.create') }}"
           class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-semibold text-sm rounded-lg shadow-lg hover:bg-green-700 transition duration-300">
            <span class="mr-2">➕</span> Add Food
        </a>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto rounded-lg shadow-md border border-gray-200">
        <table class="w-full table-auto border-collapse text-center">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider border-b border-gray-300">Name</th>
                    <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider border-b border-gray-300">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($foods as $food)
                    <tr class="hover:bg-gray-50 transition duration-200">
                        <!-- Bold Food Name -->
                        <td class="px-6 py-4 font-bold text-gray-800 text-lg">{{ $food->name }}</td>

                        <!-- Center Actions -->
                        <td class="px-6 py-4 flex justify-center flex-wrap gap-2">
                            <!-- Edit Button -->
                            <a href="{{ route('foods.edit', $food) }}"
                               class="inline-flex items-center px-5 py-2 text-white bg-blue-600 rounded-lg shadow-lg hover:bg-blue-700 transition duration-300 font-medium text-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                  <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M11 5h2M12 6v12m0 0H6m6 0h6M4 20h16M6 4h12l1 1v2M4 6h16v14H4V6z"/>
                                </svg>
                                Edit
                            </a>

                            <!-- Delete Button -->
                            <form action="{{ route('foods.destroy', $food) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this food?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="inline-flex items-center px-5 py-2 text-white bg-red-600 rounded-lg shadow-lg hover:bg-red-700 transition duration-300 font-medium text-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none"
                                         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                      <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                    Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="px-6 py-6 text-center text-gray-500">No foods found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection