@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 Jenis & Kategori -->
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
    <div class="col-md-5">
        <label for="jenis_id" class="form-label fw-semibold">Jenis Makanan</label>
        <div class="input-group">
            <span class="input-group-text bg-primary text-white"><i class="fas fa-utensils"></i></span>
            <select class="form-select" 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-5">
        <label for="kategori_id" class="form-label fw-semibold">Kategori</label>
        <div class="input-group">
            <span class="input-group-text bg-primary text-white"><i class="fas fa-tags"></i></span>
            <select class="form-select" 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>
        </div>
    </div>

    <div class="col-md-2 d-grid">
        <button class="btn btn-primary" type="submit">
            <i class="fas fa-filter me-1"></i> Terapkan
        </button>
    </div>
</form>

<!-- Filter Per Page + Search -->
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
    <!-- Kirim parameter filter yang aktif -->
    <input type="hidden" name="jenis_id" value="{{ request('jenis_id') }}">
    <input type="hidden" name="kategori_id" value="{{ request('kategori_id') }}">

    <!-- Pencarian (Kiri) -->
    <div class="col-md-4">
        <label for="search" class="form-label fw-semibold">Pencarian</label>
        <div class="input-group">
            <input type="text" name="search" id="search" class="form-control" placeholder="Cari nama makanan..." value="{{ request('search') }}">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search me-1"></i> Cari
            </button>
        </div>
    </div>

    <!-- Spacer kosong -->
    <div class="col-md-4"></div>

    <!-- Jumlah Data per Halaman (Kanan) -->
    <div class="col-md-3 ms-auto text-end">
        <label for="per_page" class="form-label fw-semibold">Jumlah Data per Halaman</label>
        <div class="input-group">
            <span class="input-group-text bg-primary text-white"><i class="fas fa-list-ol"></i></span>
            <select class="form-select" name="per_page" id="per_page" onchange="this.form.submit()">
                @php
                    $perPageOptions = [25, 50, 100, 'all'];
                    $currentPerPage = request('per_page', 25);
                @endphp
                @foreach($perPageOptions as $option)
                    <option value="{{ $option }}" {{ $currentPerPage == $option ? 'selected' : '' }}>
                        {{ $option == 'all' ? 'Semua' : $option }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
</form>




        <!-- 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">{{ ($makanans->firstItem() ?? 0) + $index }}</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>

    <!-- Pagination -->
    <div class="d-flex justify-content-between mt-3">
        <div>
            <p>Menampilkan {{ $makanans->count() }} dari {{ $makanans->total() }} makanan</p>
        </div>
        <div>
            <!-- Pagination links with Bootstrap classes -->
            <nav>
                <ul class="pagination justify-content-center">
                    {{ $makanans->links('pagination::bootstrap-4') }} <!-- Custom pagination style -->
                </ul>
            </nav>
        </div>
    </div>

    <style>
        /* Pastikan pagination menyesuaikan ukuran layar */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-left: 0;
}

.pagination .page-link {
    font-size: 1rem; /* Ukuran font untuk pagination */
    padding: 0.5rem 1rem;
    text-align: center;
}

.pagination .page-item {
    margin: 0 0.25rem;
}

/* Menyesuaikan pagination untuk tampilan mobile */
@media (max-width: 576px) {
    .pagination .page-link {
        font-size: 0.9rem; /* Ukuran font lebih kecil di layar kecil */
        padding: 0.25rem 0.5rem;
    }
}

        </style>

    </div>
</div>
<!-- Data Makanan End -->

@endsection