@extends('layout.app')

@section('content')
<div class="container">
    <h2 class="mb-4">Tambah Relasi Makanan - Komponen - Waktu Makan</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @elseif(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('relasi.store') }}" class="mb-4">
        @csrf
        <div class="form-group mb-2">
            <label for="makanan_id">Makanan</label>
            <select name="makanan_id" class="form-control">
                @foreach($makanans as $makanan)
                    <option value="{{ $makanan->id }}">{{ $makanan->nama }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group mb-2">
            <label for="komponen_id">Komponen</label>
            <select name="komponen_id" class="form-control">
                @foreach($komponens as $komponen)
                    <option value="{{ $komponen->id }}">{{ $komponen->nama }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group mb-3">
            <label for="waktu_makan_id">Waktu Makan</label>
            <select name="waktu_makan_id" class="form-control">
                @foreach($waktuMakans as $waktu)
                    <option value="{{ $waktu->id }}">{{ $waktu->nama }}</option>
                @endforeach
            </select>
        </div>

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

    <section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">

                <div class="card-body">
                    <h5 class="card-title">Filter Relasi</h5>

                    <form method="GET" action="{{ route('relasi') }}" class="row g-3 align-items-end mb-4">
                        <div class="col-md-4">
                            <label for="komponen_id" class="form-label">Filter Komponen</label>
                            <select name="komponen_id" class="form-select">
                                <option value="">-- Semua Komponen --</option>
                                @foreach($komponens as $komponen)
                                    <option value="{{ $komponen->id }}" {{ request('komponen_id') == $komponen->id ? 'selected' : '' }}>
                                        {{ $komponen->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="waktu_makan_id" class="form-label">Filter Waktu Makan</label>
                            <select name="waktu_makan_id" class="form-select">
                                <option value="">-- Semua Waktu Makan --</option>
                                @foreach($waktuMakans as $waktu)
                                    <option value="{{ $waktu->id }}" {{ request('waktu_makan_id') == $waktu->id ? 'selected' : '' }}>
                                        {{ $waktu->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary">Terapkan Filter</button>
                        </div>
                    </form>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="card-title mb-0">Data Relasi Tersimpan</h5>
                    </div>

                    <!-- Table with stripped rows -->
                    <table class="table datatable">
                        <thead>
                            <tr>
                                <th class="text-center">No</th>
                                <th class="text-center">Makanan</th>
                                <th class="text-center">Komponen</th>
                                <th class="text-center">Waktu Makanan</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($relasis as $relasi)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="text-center">{{ $relasi->makanan->nama }}</td>
                                <td class="text-center">{{ $relasi->komponen->nama }}</td>
                                <td class="text-center">{{ $relasi->waktuMakan->nama }}</td>
                                <td class="text-center">
                                    <a href="{{ route('relasi.edit', $relasi->id) }}" class="btn btn-warning btn-sm" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('relasi.destroy', $relasi->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?');" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-danger btn-sm" title="Hapus">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>

                                {{-- <td class="text-center">
                                    <form action="{{ route('relasi.destroy', $relasi->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?');" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-danger btn-sm" title="Hapus">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td> --}}
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!-- End Table -->
                </div>

            </div>
        </div>
    </div>
</section>


</div>
@endsection