@extends('layoutuser.app') 
@section('content')

<!-- Data Makanan Start -->
<div class="container-xxl py-5 bg-light">
    <div class="container">
        <!-- Judul dan Deskripsi -->
        <div class="text-center mb-5">
            <p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Data Aplikasi</p>
            <h2 class="fw-bold text-dark">Daftar Menu Makanan Sehat</h2>
            <p class="text-muted">
                Informasi kandungan gizi makanan yang tersedia dalam sistem untuk membantu Anda memilih menu yang tepat bagi penderita penyakit jantung.
            </p>
        </div>
        <!-- Catatan Penting -->
        <div class="alert alert-info mt-4 rounded-4 shadow-sm" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            <strong>Catatan:</strong> Komposisi gizi pangan dihitung per 100 gram, dengan Berat Dapat Dimakan (BDD) 100%.
        </div>


        <!-- Filter Section -->
        <div class="row mb-4">
            <div class="col-md-6">
                <form method="GET" action="{{ route('userdata') }}">
                    <div class="input-group">
                        <label class="input-group-text bg-primary text-white" for="jenis_id">Jenis Makanan</label>
                        <select class="form-select text-dark bg-white" id="jenis_id" name="jenis_id">
                            <option value="">Semua</option>
                            @foreach ($jenisMakananList as $jenis)
                                <option value="{{ $jenis->id }}" {{ request('jenis_id') == $jenis->id ? 'selected' : '' }}>
                                    {{ ucfirst($jenis->name) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
            </div>
            <div class="col-md-6">
                    <div class="input-group">
                        <label class="input-group-text bg-primary text-white" for="kategori_id">Kategori</label>
                        <select class="form-select text-dark bg-white" id="kategori_id" name="kategori_id">
                            <option value="">Semua</option>
                            @foreach ($kategoriList as $kategori)
                                <option value="{{ $kategori->id }}" {{ request('kategori_id') == $kategori->id ? 'selected' : '' }}>
                                    {{ ucfirst($kategori->kategori) }}
                                </option>
                            @endforeach
                        </select>
                        <button class="btn btn-outline-primary" type="submit">Terapkan</button>
                    </div>
                </form>
            </div>
        </div>
        
        
        
        <!-- Tabel Data -->
        <div class="table-responsive shadow-sm rounded-4 overflow-hidden">
            <table class="table table-hover table-bordered align-middle text-center bg-white">
                <thead class="table-primary text-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">🍽️ Nama Makanan</th>
                        <th scope="col">🥑 Lemak (g)</th>
                        <th scope="col">🧂 Natrium (mg)</th>
                        <th scope="col">🔥 Energi (kkal)</th>
                        <th scope="col">🍞 Karbohidrat (g)</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach ($makanans as $index => $makanan)
                    <tr>
                        <td class="fw-bold text-primary">{{ $index + 1 }}</td>
                        <td class="text-start fw-semibold">{{ $makanan->nama }}</td>
                        <td>{{ number_format($makanan->lemak, 1) }}</td>
                        <td>{{ number_format($makanan->natrium) }}</td>
                        <td>{{ number_format($makanan->energi) }}</td>
                        <td>{{ number_format($makanan->karbohidrat, 1) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
<!-- Data Makanan End -->

@endsection