543 lines
16 KiB
PHP
543 lines
16 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
<div class="animated fadeIn">
|
|
<!-- Welcome Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
<div class="welcome-card">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h2 class="welcome-title">Selamat Datang, {{ Auth::user()->name }}!</h2>
|
|
<p class="welcome-text">Di Sistem Pendukung Keputusan Pemilihan Pupuk Organik</p>
|
|
</div>
|
|
<div class="col-md-4 text-right">
|
|
<div class="date-time">
|
|
<i class="fa fa-calendar"></i> <span id="current-date"></span>
|
|
<br>
|
|
<i class="fa fa-clock-o"></i> <span id="current-time"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<div class="stat-widget-five">
|
|
<div class="stat-icon green">
|
|
<i class="fas fa-list"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="text-left">
|
|
<div class="stat-text"><span class="count">{{ \App\Models\Alternative::count() }}</span></div>
|
|
<div class="stat-heading">Total Alternatif</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<div class="stat-widget-five">
|
|
<div class="stat-icon blue">
|
|
<i class="fas fa-table"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="text-left">
|
|
<div class="stat-text"><span class="count">{{ \App\Models\Kriteria::count() }}</span></div>
|
|
<div class="stat-heading">Total Kriteria</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<div class="stat-widget-five">
|
|
<div class="stat-icon cyan">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="text-left">
|
|
<div class="stat-text"><span class="count">{{ \App\Models\User::count() }}</span></div>
|
|
<div class="stat-heading">Total User</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kriteria Penilaian (menggantikan Panduan Penggunaan) -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card guide-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-list-check me-2"></i> Kriteria Penilaian
|
|
</h5>
|
|
</div>
|
|
<div class="card-body guide-steps">
|
|
<div class="step">
|
|
<div class="step-number">N</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Nitrogen (N)</div>
|
|
<p class="step-description">Kandungan nitrogen dalam pupuk organik</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">P</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Fosfor (P)</div>
|
|
<p class="step-description">Kandungan fosfor dalam pupuk organik</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">K</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Kalium (K)</div>
|
|
<p class="step-description">Kandungan kalium dalam pupuk organik</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">Rp</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Harga</div>
|
|
<p class="step-description">Biaya yang diperlukan untuk mendapatkan pupuk</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card results-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-trophy me-2"></i> Hasil Perangkingan Terakhir
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-stats">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Ranking</th>
|
|
<th>Alternatif</th>
|
|
<th>Nilai</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php
|
|
$hasilPenilaian = DB::table('hasil_penilaian')
|
|
->join('alternatives', 'hasil_penilaian.alternatif_id', '=', 'alternatives.id')
|
|
->select('alternatives.name', 'hasil_penilaian.nilai_akhir')
|
|
->orderBy('hasil_penilaian.nilai_akhir', 'desc')
|
|
->take(5)
|
|
->get();
|
|
@endphp
|
|
|
|
@forelse($hasilPenilaian as $index => $hasil)
|
|
<tr>
|
|
<td>
|
|
<span class="badge bg-{{ $index < 3 ? 'success' : 'secondary' }}">
|
|
#{{ $index + 1 }}
|
|
</span>
|
|
</td>
|
|
<td>{{ $hasil->name }}</td>
|
|
<td>{{ number_format($hasil->nilai_akhir, 4) }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="3" class="text-center text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Belum ada hasil penilaian
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informasi Tambahan -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-info-circle me-2"></i> Informasi Sistem
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info mb-0">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
Tentang SPK Pupuk Organik
|
|
</h6>
|
|
<p class="mb-0">
|
|
Sistem Pendukung Keputusan ini menggunakan metode SAW (Simple Additive Weighting)
|
|
untuk membantu Anda memilih pupuk organik terbaik berdasarkan berbagai kriteria
|
|
seperti kandungan Nitrogen (N), Fosfor (P), Kalium (K), dan harga.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal untuk menampilkan daftar alternatif -->
|
|
<div class="modal fade" id="alternatifModal" tabindex="-1" role="dialog" aria-labelledby="alternatifModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="alternatifModalLabel">Daftar Alternatif</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="alternatifModalBody">
|
|
<!-- Daftar alternatif akan dimuat di sini oleh JavaScript -->
|
|
<p>Memuat daftar...</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Welcome Card */
|
|
.welcome-card {
|
|
background: linear-gradient(135deg, #1e7e34 0%, #20c997 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 2em;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.welcome-text {
|
|
font-size: 1.1em;
|
|
opacity: 0.9;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.date-time {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.stats-card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s ease;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-widget-five {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 2.5em;
|
|
margin-right: 15px;
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.stat-icon.green {
|
|
background: rgba(40, 167, 69, 0.1);
|
|
color: #28a745;
|
|
}
|
|
|
|
.stat-icon.blue {
|
|
background: rgba(0, 123, 255, 0.1);
|
|
color: #007bff;
|
|
}
|
|
|
|
.stat-icon.cyan {
|
|
background: rgba(23, 162, 184, 0.1);
|
|
color: #17a2b8;
|
|
}
|
|
|
|
.stat-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.stat-text {
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-heading {
|
|
color: #6c757d;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Guide Steps */
|
|
.guide-card {
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.guide-steps {
|
|
padding: 15px;
|
|
}
|
|
|
|
.step {
|
|
border-left: 3px solid #28a745;
|
|
margin-left: 10px;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
}
|
|
|
|
.step:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -6px;
|
|
top: 50%;
|
|
width: 9px;
|
|
height: 9px;
|
|
background: #28a745;
|
|
border-radius: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.step:hover:before {
|
|
background: #20c997;
|
|
box-shadow: 0 0 0 4px rgba(32, 201, 151, 0.2);
|
|
}
|
|
|
|
.step-number {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
font-size: 1.2em;
|
|
box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
|
|
}
|
|
|
|
.step-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.step-title {
|
|
margin-bottom: 5px;
|
|
color: #212529;
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.step-description {
|
|
color: #495057;
|
|
margin-bottom: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* Table Stats */
|
|
.results-card {
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.table-stats {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.table-stats .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table-stats .table thead th {
|
|
border-bottom: 2px solid #dee2e6;
|
|
color: #495057;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-stats .badge {
|
|
padding: 8px 12px;
|
|
border-radius: 30px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.text-dark {
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.card-title {
|
|
color: #212529;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.welcome-card .text-right {
|
|
text-align: left !important;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.stat-text {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
.clickable-stat {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Progress bar styling */
|
|
.progress {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: width 0.6s ease;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Badge styling */
|
|
.badge {
|
|
padding: 8px 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Alert styling */
|
|
.alert-success {
|
|
background-color: rgba(40, 167, 69, 0.1);
|
|
border-color: rgba(40, 167, 69, 0.2);
|
|
color: #28a745;
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn-success {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
border: none;
|
|
padding: 10px 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Update current date and time
|
|
function updateDateTime() {
|
|
const now = new Date();
|
|
const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
const timeOptions = { hour: '2-digit', minute: '2-digit' };
|
|
|
|
document.getElementById('current-date').textContent = now.toLocaleDateString('id-ID', dateOptions);
|
|
document.getElementById('current-time').textContent = now.toLocaleTimeString('id-ID', timeOptions);
|
|
}
|
|
|
|
// Update every second
|
|
setInterval(updateDateTime, 1000);
|
|
updateDateTime(); // Initial call
|
|
|
|
// Animate count numbers
|
|
$('.count').each(function () {
|
|
$(this).prop('Counter',0).animate({
|
|
Counter: $(this).text()
|
|
}, {
|
|
duration: 2000,
|
|
easing: 'swing',
|
|
step: function (now) {
|
|
$(this).text(Math.ceil(now));
|
|
}
|
|
});
|
|
});
|
|
|
|
// Script untuk menampilkan daftar alternatif saat stat card diklik
|
|
document.getElementById('alternatif-stat').addEventListener('click', function() {
|
|
var alternatifModal = new bootstrap.Modal(document.getElementById('alternatifModal'));
|
|
var modalBody = document.getElementById('alternatifModalBody');
|
|
|
|
// Kosongkan isi modal sebelumnya
|
|
modalBody.innerHTML = '';
|
|
|
|
// Data alternatif statis
|
|
const alternatifItems = [
|
|
'pupuk cair darah',
|
|
'pupuk cair urin',
|
|
'pupuk cair air kelapa',
|
|
'pupuk cair jus pisang'
|
|
];
|
|
|
|
// Buat daftar dan tambahkan ke modal body
|
|
const ul = document.createElement('ul');
|
|
alternatifItems.forEach((item, index) => {
|
|
const li = document.createElement('li');
|
|
li.textContent = `${index + 1}. ${item}`;
|
|
ul.appendChild(li);
|
|
});
|
|
modalBody.appendChild(ul);
|
|
|
|
// Tampilkan modal
|
|
alternatifModal.show();
|
|
});
|
|
</script>
|
|
@endsection |