@extends('layouts.main')

@section('title', $title = 'Data Makanan')

@section('content')
<div class="container pt-5">
    <div class="row gy-4 shadow mb-4 bg-body-tertiary rounded">
        <h3 class="mb-4">Alternatif Makanan</h3>
    </div>
    <div class="row gy-4">
        <div class="pt-3 card">
            <div class="row">
                <div class="col-sm-12 pb-3 pt-3">
                    <a href="{{ route ('makanan.create') }}" class="font-sm btn btn-success">Tambah</a>
                </div>
            </div>
            <div class="pb-3 table-responsive text-nowrap">
                <table class="table table-hover table-stripped border-right border-bottom border-left table-bordered" id="dataTable">
                    <thead>
                        <tr>
                            <th style="width: 20px">No</th>
                            <th>Kalori</th>
                            <th>Alternatif</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($makanan as $key => $value)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td>{{ $value->kode }}</td>
                            <td>{{ $value->alternatif }}</td>
                            <td>
                                <a href="{{ route ('makanan.show', $value->id) }}" class="btn btn-info btn-xs"><i class='bx bx-show'></i>
                                    Detail
                                </a>
                                <a href="{{ route ('makanan.edit', $value->id) }}" class="btn btn-warning btn-xs text-white"><i class='bx bx-edit-alt'></i>
                                    Edit
                                </a>
                                <a id="delete" href="{{ route ('makanan.destroy', $value->id) }}" class="btn btn-danger btn-xs" onclick="notificationBeforeDelete(event, this)"><i class='bx bx-trash'></i>
                                    Delete
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection