@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8">

    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-extrabold text-gray-800">📦 Usage</h1>
        <a href="{{ route('deliveries.create') }}"
           class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg shadow hover:bg-indigo-700 transition">
            + New Usage
        </a>
    </div>

    <!-- Deliveries List -->
    <div class="space-y-4">
        @forelse($deliveries as $d)
            <div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition border">
                <div class="flex justify-between items-start">
                    <!-- Customer & Date -->
                    <div>
                        <div class="font-semibold text-lg text-gray-800">
                            {{ $d->customer_name ?? 'Walk-in' }}
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ $d->delivered_at->format('Y-m-d H:i') }}
                        </div>
                    </div>

                    <!-- Items -->
                    <div class="flex flex-wrap gap-2 text-sm">
                        @foreach($d->items as $it)
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full font-medium">
                                {{ $it->food->name }} — {{ $it->quantity }}
                            </span>
                        @endforeach
                    </div>
                </div>
            </div>
        @empty
            <div class="p-6 text-center text-gray-500 bg-white rounded-xl shadow">
                🚫 No deliveries yet.
            </div>
        @endforelse
    </div>
</div>
@endsection