412 lines
16 KiB
PHP
412 lines
16 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Pilih Alternatif')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.card {
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.komponen-card {
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.komponen-card .card-header {
|
|
background: linear-gradient(45deg, #0d6efd, #0dcaf0);
|
|
padding: 1rem;
|
|
border: none;
|
|
}
|
|
|
|
.makanan-card {
|
|
border-radius: 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
.makanan-card .card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.custom-control-input:checked ~ .custom-control-label::before {
|
|
background-color: #198754;
|
|
border-color: #198754;
|
|
}
|
|
|
|
.nutrition-list {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.nutrition-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.nutrition-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
}
|
|
|
|
.search-box .form-control {
|
|
padding-left: 2.5rem;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #6c757d;
|
|
}
|
|
|
|
.filter-section {
|
|
background: #fff;
|
|
padding: 1.5rem;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.rekomendasi-section {
|
|
background: #d1e7dd;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.rekomendasi-section h6 {
|
|
color: #0f5132;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.rekomendasi-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rekomendasi-list li {
|
|
padding: 0.5rem;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn-calculate {
|
|
padding: 1rem 2rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-calculate:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.col-md-4 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Page Title -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h3 class="font-weight-bold">Pilih Alternatif Makanan</h3>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item active">Pilih Alternatif</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Validation Alert -->
|
|
<div class="alert alert-info alert-dismissible fade show mb-4" role="alert">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Penting!</strong> Pilih minimal 4 alternatif makanan untuk setiap komponen untuk perbandingan yang optimal.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="filter-section">
|
|
<form method="GET" action="{{ route('alternatif.pilih') }}" class="mb-4">
|
|
<div class="row align-items-end">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="waktu_makan_id" class="form-label">Waktu Makan</label>
|
|
<select name="waktu_makan_id" id="waktu_makan_id" class="form-select" required>
|
|
<option value="">Pilih Waktu Makan</option>
|
|
@foreach($waktuMakans as $waktu)
|
|
<option value="{{ $waktu->id }}" {{ $waktuMakanId == $waktu->id ? 'selected' : '' }}>
|
|
{{ $waktu->nama }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group search-box">
|
|
<label for="q" class="form-label">Cari Makanan</label>
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" name="q" id="q" class="form-control"
|
|
value="{{ $search ?? '' }}" placeholder="Ketik nama makanan...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="fas fa-filter me-2"></i>Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@if($waktuMakanId)
|
|
<!-- Form Pilih Alternatif -->
|
|
<form action="{{ route('alternatif.pilih.simpan') }}" method="POST" id="formPilihAlternatif">
|
|
@csrf
|
|
<input type="hidden" name="waktu_makan_id" value="{{ $waktuMakanId }}">
|
|
|
|
<!-- Komponen Cards -->
|
|
@foreach($komponens as $komponen)
|
|
<div class="komponen-card">
|
|
<div class="card-header d-flex align-items-center justify-content-between">
|
|
<h5 class="card-title mb-0 text-white d-flex align-items-center">
|
|
<i class="fas fa-utensils me-2"></i>{{ $komponen->nama }}
|
|
</h5>
|
|
<div class="form-check ms-auto">
|
|
<input class="form-check-input pilih-semua"
|
|
type="checkbox"
|
|
data-komponen-id="{{ $komponen->id }}"
|
|
id="pilihSemua{{ $komponen->id }}">
|
|
<label class="form-check-label text-white ms-2" for="pilihSemua{{ $komponen->id }}">
|
|
<strong>Pilih Semua</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="card-body bg-white">
|
|
<!-- Hidden input for komponen_id -->
|
|
<input type="hidden" name="komponen_ids[]" value="{{ $komponen->id }}" class="komponen-input">
|
|
|
|
<!-- Rekomendasi Ahli Section -->
|
|
@php
|
|
$rekomendasiKomponen = $rekomendasiAhli->where('komponen_id', $komponen->id)
|
|
->where('waktu_makan_id', $waktuMakanId);
|
|
@endphp
|
|
|
|
@if($rekomendasiKomponen->isNotEmpty())
|
|
<div class="rekomendasi-section">
|
|
<h6><i class="fas fa-lightbulb me-2"></i>Rekomendasi Ahli:</h6>
|
|
<ul class="rekomendasi-list">
|
|
@foreach($rekomendasiKomponen as $rekomendasi)
|
|
<li>{{ $rekomendasi->makanan->nama ?? 'Makanan tidak ditemukan' }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Alternatif Makanan Section -->
|
|
@php
|
|
$makananKomponen = $makanans->where('komponen_id', $komponen->id);
|
|
@endphp
|
|
|
|
@if($makananKomponen->isNotEmpty())
|
|
<div class="row">
|
|
@foreach($makananKomponen as $makanan)
|
|
<div class="col-md-4 mb-3">
|
|
<div class="makanan-card card h-100">
|
|
<div class="card-body">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox"
|
|
class="custom-control-input komponen-{{ $komponen->id }}"
|
|
name="alternatifs[]"
|
|
value="{{ $makanan->id }}"
|
|
id="makanan{{ $makanan->id }}">
|
|
<label class="custom-control-label" for="makanan{{ $makanan->id }}">
|
|
<h6 class="mb-2">{{ $makanan->nama }}</h6>
|
|
</label>
|
|
</div>
|
|
<div class="nutrition-list">
|
|
<div class="nutrition-item">
|
|
<span><i class="fas fa-circle-dot me-2"></i>Lemak</span>
|
|
<span>{{ $makanan->lemak }}g</span>
|
|
</div>
|
|
<div class="nutrition-item">
|
|
<span><i class="fas fa-circle-dot me-2"></i>Natrium</span>
|
|
<span>{{ $makanan->natrium }}mg</span>
|
|
</div>
|
|
<div class="nutrition-item">
|
|
<span><i class="fas fa-circle-dot me-2"></i>Energi</span>
|
|
<span>{{ $makanan->energi }}kal</span>
|
|
</div>
|
|
<div class="nutrition-item">
|
|
<span><i class="fas fa-circle-dot me-2"></i>Karbohidrat</span>
|
|
<span>{{ $makanan->karbohidrat }}g</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Tidak ada alternatif makanan yang tersedia untuk komponen ini.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<div class="text-center mt-4 mb-5">
|
|
<button type="submit" class="btn btn-success btn-lg btn-calculate">
|
|
<i class="fas fa-calculator me-2"></i>Proses Perhitungan AHP
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@else
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Silakan pilih Waktu Makan untuk melihat rekomendasi dan alternatif yang tersedia.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// event handler untuk checkbox pilih semua
|
|
$('.pilih-semua').on('change', function () {
|
|
let komponenId = $(this).data('komponen-id');
|
|
let checked = $(this).is(':checked');
|
|
$(`.komponen-${komponenId}`).prop('checked', checked);
|
|
updateCounter(komponenId);
|
|
updateSubmitButton();
|
|
});
|
|
|
|
// Fungsi untuk menghitung jumlah checkbox yang dicentang per komponen
|
|
function getCheckedCountByKomponen(komponenId) {
|
|
return $(`.komponen-${komponenId}:checked`).length;
|
|
}
|
|
|
|
// Fungsi untuk update counter di card header
|
|
function updateCounter(komponenId) {
|
|
const checkedCount = getCheckedCountByKomponen(komponenId);
|
|
const cardHeader = $(`.komponen-${komponenId}`).first().closest('.komponen-card').find('.card-title');
|
|
const originalText = cardHeader.text().replace(/\(\d+\/4\+\)$/, '').trim();
|
|
cardHeader.text(`${originalText} (${checkedCount}/4+)`);
|
|
}
|
|
|
|
// Fungsi untuk memvalidasi form
|
|
function validateForm() {
|
|
let isValid = true;
|
|
let errorMessages = [];
|
|
|
|
// Cek setiap komponen
|
|
$('.komponen-input').each(function() {
|
|
const komponenId = $(this).val();
|
|
const checkedCount = getCheckedCountByKomponen(komponenId);
|
|
|
|
if (checkedCount < 4) {
|
|
isValid = false;
|
|
const komponenName = $(this).closest('.komponen-card').find('.card-title').text().replace(/\(\d+\/4\+\)$/, '').trim();
|
|
errorMessages.push(`Pilih minimal 4 alternatif untuk komponen ${komponenName} (saat ini: ${checkedCount})`);
|
|
}
|
|
});
|
|
|
|
return {
|
|
isValid: isValid,
|
|
messages: errorMessages
|
|
};
|
|
}
|
|
|
|
// Event handler untuk checkbox
|
|
$('input[type="checkbox"]').on('change', function() {
|
|
const komponenId = $(this).attr('class').split(' ').find(cls => cls.startsWith('komponen-'))?.split('-')[1];
|
|
if (komponenId) {
|
|
updateCounter(komponenId);
|
|
updateSubmitButton();
|
|
}
|
|
});
|
|
|
|
// Update tombol submit berdasarkan validasi
|
|
function updateSubmitButton() {
|
|
const validation = validateForm();
|
|
const submitBtn = $('.btn-calculate');
|
|
|
|
if (!validation.isValid) {
|
|
submitBtn.prop('disabled', true)
|
|
.attr('title', validation.messages.join('\n'));
|
|
} else {
|
|
submitBtn.prop('disabled', false)
|
|
.attr('title', 'Lanjutkan ke perhitungan AHP');
|
|
}
|
|
}
|
|
|
|
// Inisialisasi tombol submit dan counter
|
|
updateSubmitButton();
|
|
|
|
// Inisialisasi counter di setiap card header
|
|
$('.komponen-input').each(function() {
|
|
const komponenId = $(this).val();
|
|
updateCounter(komponenId);
|
|
});
|
|
|
|
// Validasi form sebelum submit
|
|
$('#formPilihAlternatif').on('submit', function(e) {
|
|
const validation = validateForm();
|
|
|
|
if (!validation.isValid) {
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
title: 'Peringatan',
|
|
html: validation.messages.join('<br>'),
|
|
icon: 'warning',
|
|
confirmButtonText: 'Mengerti'
|
|
});
|
|
}
|
|
});
|
|
|
|
// Animasi smooth scroll untuk cards
|
|
if (typeof AOS !== 'undefined') {
|
|
AOS.init({
|
|
duration: 800,
|
|
easing: 'ease-in-out',
|
|
once: true,
|
|
mirror: false
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|