292 lines
13 KiB
PHP
292 lines
13 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Tambah Makanan')
|
|
|
|
@include('admin.shared.admin-styles')
|
|
|
|
@section('content')
|
|
<div class="admin-container container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="page-header animate-fade-in">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<h3 class="mb-2 text-white">
|
|
<i class="fas fa-utensils me-2"></i>Tambah Makanan
|
|
</h3>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('makanan') }}" class="text-white-50">Makanan</a></li>
|
|
<li class="breadcrumb-item active text-white" aria-current="page">Tambah Makanan</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="admin-card animate-fade-in">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-4">
|
|
<i class="fas fa-utensils me-2"></i>Detail Makanan
|
|
</h5>
|
|
|
|
<form id="AddUserForm" method="POST" action="{{ url('/makanan/storemakanan') }}">
|
|
@csrf
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-tag me-2"></i>Nama Makanan
|
|
</label>
|
|
<input type="text"
|
|
class="admin-form-control @error('nama') is-invalid @enderror"
|
|
name="nama"
|
|
value="{{ old('nama') }}"
|
|
placeholder="Masukkan nama makanan"
|
|
required>
|
|
@error('nama')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-list me-2"></i>Kategori
|
|
</label>
|
|
<select class="admin-form-control @error('kategori_id') is-invalid @enderror"
|
|
name="kategori_id"
|
|
required>
|
|
<option value="" selected disabled>Pilih Kategori</option>
|
|
@foreach($kategoris as $kategori)
|
|
<option value="{{ $kategori->id }}" {{ old('kategori_id') == $kategori->id ? 'selected' : '' }}>
|
|
{{ $kategori->kategori }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('kategori_id')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-cookie-bite me-2"></i>Jenis Makanan
|
|
</label>
|
|
<select class="admin-form-control @error('jenis_id') is-invalid @enderror"
|
|
name="jenis_id"
|
|
required>
|
|
<option value="" selected disabled>Pilih Jenis Makanan</option>
|
|
@foreach($jenis_makanans as $jenis)
|
|
<option value="{{ $jenis->id }}" {{ old('jenis_id') == $jenis->id ? 'selected' : '' }}>
|
|
{{ $jenis->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('jenis_id')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-oil-can me-2"></i>Lemak (g)
|
|
</label>
|
|
<input type="number"
|
|
step="0.01"
|
|
class="admin-form-control @error('lemak') is-invalid @enderror"
|
|
name="lemak"
|
|
value="{{ old('lemak') }}"
|
|
placeholder="Masukkan kandungan lemak"
|
|
required>
|
|
@error('lemak')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-salt-shaker me-2"></i>Natrium (mg)
|
|
</label>
|
|
<input type="number"
|
|
step="0.01"
|
|
class="admin-form-control @error('natrium') is-invalid @enderror"
|
|
name="natrium"
|
|
value="{{ old('natrium') }}"
|
|
placeholder="Masukkan kandungan natrium"
|
|
required>
|
|
@error('natrium')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-bolt me-2"></i>Energi (kkal)
|
|
</label>
|
|
<input type="number"
|
|
step="0.01"
|
|
class="admin-form-control @error('energi') is-invalid @enderror"
|
|
name="energi"
|
|
value="{{ old('energi') }}"
|
|
placeholder="Masukkan kandungan energi"
|
|
required>
|
|
@error('energi')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-bread-slice me-2"></i>Karbohidrat (g)
|
|
</label>
|
|
<input type="number"
|
|
step="0.01"
|
|
class="admin-form-control @error('karbohidrat') is-invalid @enderror"
|
|
name="karbohidrat"
|
|
value="{{ old('karbohidrat') }}"
|
|
placeholder="Masukkan kandungan karbohidrat"
|
|
required>
|
|
@error('karbohidrat')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end mt-4">
|
|
<button type="reset" class="btn btn-secondary me-2">
|
|
<i class="fas fa-undo me-2"></i>Reset
|
|
</button>
|
|
<a href="{{ route('makanan') }}" class="btn btn-secondary me-2">
|
|
<i class="fas fa-arrow-left me-2"></i>Kembali
|
|
</a>
|
|
<button type="button" class="btn btn-primary" onclick="confirmSave()">
|
|
<i class="fas fa-save me-2"></i>Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.admin-form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.admin-form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: #333;
|
|
}
|
|
|
|
.admin-form-label i {
|
|
width: 20px;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.admin-form-control {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.admin-form-control:focus {
|
|
border-color: #2196f3;
|
|
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
|
}
|
|
|
|
.admin-form-control.is-invalid {
|
|
border-color: #dc3545;
|
|
padding-right: calc(1.5em + 0.75rem);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(0.375em + 0.1875rem) center;
|
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
}
|
|
|
|
.invalid-feedback {
|
|
display: none;
|
|
width: 100%;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875em;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.is-invalid ~ .invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.admin-form-control {
|
|
padding: 0.625rem 0.875rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
function confirmSave() {
|
|
Swal.fire({
|
|
title: 'Simpan Makanan',
|
|
text: "Apakah Anda yakin ingin menyimpan makanan ini?",
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#2196f3',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: '<i class="fas fa-save me-2"></i>Ya, simpan!',
|
|
cancelButtonText: '<i class="fas fa-times me-2"></i>Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('AddUserForm').submit();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const animateElements = document.querySelectorAll('.animate-fade-in');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = 1;
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
animateElements.forEach(element => {
|
|
element.style.opacity = 0;
|
|
element.style.transform = 'translateY(20px)';
|
|
observer.observe(element);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|