@extends('layouts.user')

@section('title', 'Foods')
@section('page-title', 'Food Database')
@section('page-subtitle', 'Browse nutritional information for available foods.')

@section('content')

    <div class="page-heading">
        <div>
            <h2>Food Database</h2>
            <p>Browse nutritional information for available foods.</p>
        </div>
    </div>

    <form method="GET" action="{{ route('user.foods') }}" class="search-wrapper">
        <span>🔍</span>

        <input type="search" name="search" value="{{ $search ?? '' }}" placeholder="Search food..."
            aria-label="Search foods">

        <button type="submit" class="btn btn-primary">Search</button>
    </form>

    <div class="food-grid">
        @forelse ($foods as $food)
            <article class="card food-card">
                <div class="card-heading">
                    <h3>{{ $food->name }}</h3>
                    <span class="stat-icon green">🍎</span>
                </div>

                <p>Nutrition per 100g</p>

                <div class="nutrition-preview">
                    <div>
                        <strong>{{ number_format($food->calories_per_100g) }}</strong>
                        <small>Calories</small>
                    </div>

                    <div>
                        <strong>{{ number_format($food->protein_per_100g, 1) }}g</strong>
                        <small>Protein</small>
                    </div>

                    <div>
                        <strong>{{ number_format($food->carbs_per_100g, 1) }}g</strong>
                        <small>Carbs</small>
                    </div>

                    <div>
                        <strong>{{ number_format($food->fat_per_100g, 1) }}g</strong>
                        <small>Fat</small>
                    </div>
                </div>
            </article>
        @empty
            <div class="card">
                <h3>No foods found</h3>
                <p>
                    @if (!empty($search))
                        No active foods match “{{ $search }}”.
                    @else
                        There are currently no active foods in the database.
                    @endif
                </p>
            </div>
        @endforelse
    </div>

    <div class="pagination-wrapper">
        {{ $foods->links() }}
    </div>

@endsection