138 lines
6.1 KiB
PHP
138 lines
6.1 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
<div class="pagetitle">
|
|
<h1>Perbandingan Alternatif</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}">Home</a></li>
|
|
<li class="breadcrumb-item active"><a href="{{ route('alternatif.pilih') }}">Pemilihan Alternatif</a></li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Pemilihan Alternatif</h5>
|
|
|
|
<form action="{{ route('alternatif.pilih') }}" method="POST">
|
|
@csrf
|
|
<div class="row">
|
|
@foreach ($makanans as $makanan)
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input alternatif-checkbox" type="checkbox" name="alternatifs[]" value="{{ $makanan->id }}" id="alt{{ $makanan->id }}">
|
|
<label class="form-check-label" for="alt{{ $makanan->id }}">
|
|
{{ $makanan->nama }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary mt-3" id="submitBtn" disabled>Lanjut ke Perbandingan</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr class="my-4">
|
|
|
|
<h5 class="card-title">Data Semua Alternatif</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
{{-- Tabel --}}
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered text-center">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Makanan</th>
|
|
<th>Lemak</th>
|
|
<th>Natrium</th>
|
|
<th>Energi</th>
|
|
<th>Karbohidrat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($makanans as $index => $makanan)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td>{{ $makanan->nama }}</td>
|
|
<td>{{ $makanan->lemak }} g</td>
|
|
<td>{{ $makanan->natrium }} mg</td>
|
|
<td>{{ $makanan->energi }} kal</td>
|
|
<td>{{ $makanan->karbohidrat }} g</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
{{-- Filter Kriteria --}}
|
|
<form method="GET" class="mb-3">
|
|
<div class="row align-items-end">
|
|
<div class="col-md-12">
|
|
<label for="sort" class="form-label">Urutkan berdasarkan kriteria:</label>
|
|
<select class="form-select" name="sort" id="sort">
|
|
<option value="">-- Pilih Kriteria --</option>
|
|
<option value="lemak" {{ request('sort') == 'lemak' ? 'selected' : '' }}>Lemak</option>
|
|
<option value="natrium" {{ request('sort') == 'natrium' ? 'selected' : '' }}>Natrium</option>
|
|
<option value="energi" {{ request('sort') == 'energi' ? 'selected' : '' }}>Energi</option>
|
|
<option value="karbohidrat" {{ request('sort') == 'karbohidrat' ? 'selected' : '' }}>Karbohidrat</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-12 mt-2">
|
|
<button type="submit" class="btn btn-secondary w-100">Filter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const checkboxes = document.querySelectorAll('.alternatif-checkbox');
|
|
const maxAllowed = 6;
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
function updateUI() {
|
|
const checked = document.querySelectorAll('.alternatif-checkbox:checked');
|
|
const checkedCount = checked.length;
|
|
|
|
checkboxes.forEach(cb => {
|
|
if (!cb.checked) {
|
|
cb.disabled = checkedCount >= maxAllowed;
|
|
}
|
|
});
|
|
|
|
submitBtn.disabled = (checkedCount !== maxAllowed);
|
|
}
|
|
|
|
checkboxes.forEach(cb => {
|
|
cb.addEventListener('change', updateUI);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|