435 lines
13 KiB
PHP
435 lines
13 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, Admin!</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 -->
|
|
<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 memilih pupuk organik terbaik berdasarkan berbagai kriteria
|
|
seperti kandungan Nitrogen (N), Fosfor (P), Kalium (K), dan harga.
|
|
</p>
|
|
</div>
|
|
</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(78, 230, 8, 0.87);
|
|
}
|
|
|
|
.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;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
</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>
|
|
@endsection |