SPK-Lahan-Tanaman-Cabai-SAW/resources/views/admin/dashboard.blade.php

<x-layout>
         <x-slot:title>{{ $title }}</x-slot>
         
           <!-- Card Statistik Utama -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Kriteria -->
    <div class="bg-gray-100 rounded-lg shadow p-4 flex items-center relative overflow-hidden">
    {{-- Garis vertikal di kanan --}}
    <div class="absolute top-0 right-0 h-full w-1 bg-green-500 rounded-tr-lg rounded-br-lg"></div>

    <div class="bg-green-500 text-white rounded-full p-2 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M5 13l4 4L19 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>

    <div>
        <p class="text-sm text-gray-500">Jumlah Kriteria</p>
        <p class="text-2xl font-bold text-gray-800">{{ $jumlahKriteria }}</p>
    </div>
</div>

    <!-- Subkriteria -->
<div class="bg-gray-100 rounded-lg shadow p-4 flex items-center relative overflow-hidden">
    <div class="absolute top-0 right-0 h-full w-1 bg-blue-500 rounded-tr-lg rounded-br-lg"></div>
    <div class="bg-blue-500 text-white rounded-full p-2 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" stroke-width="2"/>
        </svg>
    </div>
    <div>
        <p class="text-sm text-gray-500">Jumlah SubKriteria</p>
        <p class="text-2xl font-bold text-gray-800">{{ $jumlahSubkriteria }}</p>
    </div>
</div>

<!-- Alternatif -->
<div class="bg-gray-100 rounded-lg shadow p-4 flex items-center relative overflow-hidden">
    <div class="absolute top-0 right-0 h-full w-1 bg-yellow-500 rounded-tr-lg rounded-br-lg"></div>
    <div class="bg-yellow-500 text-white rounded-full p-2 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M9 12l2 2 4-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
    <div>
        <p class="text-sm text-gray-500">Jumlah Alternatif</p>
        <p class="text-2xl font-bold text-gray-800">{{ $jumlahAlternatif }}</p>
    </div>
</div>

<!-- User -->
<div class="bg-gray-100 rounded-lg shadow p-4 flex items-center relative overflow-hidden">
    <div class="absolute top-0 right-0 h-full w-1 bg-red-500 rounded-tr-lg rounded-br-lg"></div>
    <div class="bg-red-500 text-white rounded-full p-2 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M5.121 17.804A7.5 7.5 0 0 1 12 15a7.5 7.5 0 0 1 6.879 2.804M15 11a3 3 0 1 0-6 0" stroke-width="2"/>
        </svg>
    </div>
    <div>
        <p class="text-sm text-gray-500">Jumlah User</p>
        <p class="text-2xl font-bold text-gray-800">{{ $jumlahUser }}</p>
    </div>
</div>

</div>


<canvas id="lineChart" height="100"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('lineChart').getContext('2d');

    // Ambil data dari PHP
    const labels = {!! json_encode($chartData->pluck('periode')->map(fn($p) => \Carbon\Carbon::parse($p)->format('M Y'))) !!};
    const values = {!! json_encode($chartData->pluck('nilai_akhir')) !!};
    const lahanLabels = {!! json_encode($chartData->pluck('nama_lahan')) !!};

    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Nilai Tertinggi / Bulan',
                data: values,
                borderColor: 'rgba(56, 142, 60, 1)',
                backgroundColor: 'rgba(200, 230, 201, 0.5)',
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Riwayat Nilai Tertinggi per Bulan' },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const index = context.dataIndex;
                            const value = context.formattedValue;
                            const lahan = lahanLabels[index];
                            return ` ${lahan}: ${value}`;
                        }
                    }
                }
            },
            scales: {
                y: { beginAtZero: true },
            }
        }
    });
</script>


{{-- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

   <!-- Card Penjelasan SAW -->
    <div class="bg-gray-100 rounded-lg shadow p-6 border-l-4 border-green-600 relative">
        <div class="absolute -top-5 -left-5 bg-green-500 text-white rounded-full p-4 shadow-lg">
            📊
        </div>
        <h2 class="text-xl font-bold text-gray-800 mb-3 ml-10">Apa Itu Metode SAW?</h2>
        <p class="text-gray-700 text-sm leading-relaxed ml-10">
            Metode <strong>SAW</strong> atau <em>Simple Additive Weighting</em> adalah cara gampang untuk memilih yang terbaik dari sekian banyak pilihan berdasarkan beberapa kriteria.
        </p>
        <ul class="list-disc text-sm text-gray-600 ml-16 mt-3 space-y-1">
            <li>Menentukan bobot tiap kriteria</li>
            <li>Menilai setiap alternatif berdasarkan kriteria tersebut</li>
            <li>Menjumlahkan nilai yang telah dinormalisasi</li>
            <li>Alternatif dengan skor tertinggi = pilihan terbaik! 🚀</li>
        </ul>
        <div class="mt-4 ml-10 text-green-600 font-medium text-sm">
            Gampang, cepat, dan akurat untuk bantu kamu bikin keputusan 💡
        </div>
    </div>

    <!-- Card Informasi Kriteria -->
    <div class="bg-gray-100 rounded-lg shadow p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">6 Kriteria Penilaian</h2>
        <ul class="space-y-3">
            <li class="flex items-center">
                <div class="bg-green-500 text-white rounded-full p-2 mr-4 text-xl">
                    🌧️
                </div>
                <span class="text-gray-700">Curah Hujan</span>
            </li>
            <li class="flex items-center">
                <div class="bg-blue-500 text-white rounded-full p-2 mr-4 text-xl">
                    🌡️
                </div>
                <span class="text-gray-700">Suhu Tanah</span>
            </li>
            <li class="flex items-center">
                <div class="bg-yellow-500 text-white rounded-full p-2 mr-4 text-xl">
                    💧
                </div>
                <span class="text-gray-700">Kelembapan</span>
            </li>
            <li class="flex items-center">
                <div class="bg-purple-500 text-white rounded-full p-2 mr-4 text-xl">
                    ⚗️
                </div>
                <span class="text-gray-700">pH Tanah</span>
            </li>
            <li class="flex items-center">
                <div class="bg-pink-500 text-white rounded-full p-2 mr-4 text-xl">
                    🧱
                </div>
                <span class="text-gray-700">Tekstur Tanah</span>
            </li>
            <li class="flex items-center">
                <div class="bg-indigo-500 text-white rounded-full p-2 mr-4 text-xl">
                    🌿
                </div>
                <span class="text-gray-700">Tanaman Sebelumnya</span>
            </li>
        </ul>
    </div>

</div> --}}
<div class="mt-8 w-full">
    {{-- Filter Periode --}}
    <form method="GET" action="{{ route('dashboard') }}" class="mb-4 flex items-center gap-3">
        <label for="periode" class="text-sm font-medium text-[#1B5E20]">Filter Periode:</label>
        <input type="month" id="periode" name="periode" value="{{ request('periode') }}" class="border border-gray-300 rounded px-2 py-1">
        <button type="submit" class="px-3 py-1 bg-[#388E3C] text-white rounded hover:bg-green-800">Filter</button>
        <a href="{{ route('dashboard') }}" class="text-sm text-red-600 hover:underline">Reset</a>
    </form>

    {{-- Tabel Riwayat --}}
    <div class="overflow-x-auto overflow-y-auto max-h-[400px] border border-[#C8E6C9] rounded-lg">
        <table class="w-full text-sm text-left text-[#1B5E20]">
            <thead class="text-xs text-white uppercase bg-[#388E3C] sticky top-0">
                <tr>
                    <th class="px-6 py-3">No</th>
                    <th class="px-6 py-3">Periode</th>
                    <th class="px-6 py-3">Nama Lahan</th>
                    <th class="px-6 py-3">Nilai Akhir</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($historis as $index => $item)
                    <tr class="bg-white border-b hover:bg-[#f1f1f1]">
                        <td class="px-6 py-3">{{ $index + 1 }}</td>
                        <td class="px-6 py-3">{{ \Carbon\Carbon::parse($item->periode)->format('F Y') }}</td>
                        <td class="px-6 py-3">{{ $item->nama_lahan }}</td>
                        <td class="px-6 py-3 font-semibold">{{ $item->nilai_akhir }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center text-gray-500 py-4">Tidak ada data riwayat.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="mt-4">
        {{ $historis->links() }}
    </div>
</div>



</x-layout>