@extends('layouts.app')

@section('content')

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    <!-- TITLE -->
    <div class="mb-10">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">
            Ringkasan Data
        </h1>
        <p class="text-base text-gray-500 mt-2">
            Overview data sistem rekomendasi makanan gastritis
        </p>
    </div>

    <!-- CARDS -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

        <!-- PASIEN -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">

            <div class="flex items-center justify-between mb-6">
                <span class="text-base text-gray-500 font-medium">
                    Total Pasien
                </span>
                <div class="bg-green-100 text-green-700 p-3 rounded-xl">
                    <i class="ri-team-line text-xl"></i>
                </div>
            </div>

            <div class="text-4xl font-bold text-gray-800">
                {{ $pasienCount ?? 0 }}
            </div>

            <p class="text-sm text-gray-400 mt-3">
                Data pasien terdaftar
            </p>
        </div>


        <!-- MAKANAN -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">

            <div class="flex items-center justify-between mb-6">
                <span class="text-base text-gray-500 font-medium">
                    Data Makanan
                </span>
                <div class="bg-emerald-100 text-emerald-700 p-3 rounded-xl">
                    <i class="ri-restaurant-line text-xl"></i>
                </div>
            </div>

            <div class="text-4xl font-bold text-gray-800">
                {{ $makananCount ?? 0 }}
            </div>

            <p class="text-sm text-gray-400 mt-3">
                Alternatif makanan tersedia
            </p>
        </div>


        <!-- LAPORAN -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">

            <div class="flex items-center justify-between mb-6">
                <span class="text-base text-gray-500 font-medium">
                    Riwayat Rekomendasi
                </span>
                <div class="bg-teal-100 text-teal-700 p-3 rounded-xl">
                    <i class="ri-file-chart-line text-xl"></i>
                </div>
            </div>

            <div class="text-4xl font-bold text-gray-800">
                {{ $laporanCount ?? 0 }}
            </div>

            <p class="text-sm text-gray-400 mt-3">
                Total proses SAW dilakukan
            </p>
        </div>

    </div>

   <!-- PENJELASAN APLIKASI -->
<div class="mt-10 bg-gradient-to-r from-green-50 to-white border border-green-100 rounded-3xl p-8 shadow-sm">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">

        <!-- TEXT -->
        <div>

            <span class="inline-flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-semibold mb-5">
                <i class="ri-heart-pulse-line"></i>
                Sistem Pendukung Keputusan
            </span>

            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 leading-snug">
                Sistem Rekomendasi Makanan
                untuk Penderita Gastritis
            </h2>

            <p class="text-gray-600 leading-8 mt-5 text-justify">
                Aplikasi ini digunakan untuk membantu proses pemilihan makanan yang lebih sesuai
                bagi penderita gastritis berdasarkan kondisi pasien. Sistem mengolah data gejala,
                aktivitas harian, berat badan, tinggi badan, jenis kelamin, serta data kandungan
                makanan untuk menghasilkan rekomendasi menggunakan metode
                <span class="font-semibold text-green-700">
                    Simple Additive Weighting (SAW)
                </span>.
            </p>

            <p class="text-gray-600 leading-8 mt-4 text-justify">
                Hasil rekomendasi tidak hanya menampilkan makanan dengan nilai SAW tertinggi,
                tetapi juga memberikan informasi kebutuhan kalori harian, jumlah porsi, ukuran porsi,
                frekuensi makan, komposisi makanan, dan alternatif makanan serupa. Dengan demikian,
                aplikasi ini dapat membantu petugas dalam membuat laporan rekomendasi makanan
                yang lebih terarah, mudah dipahami, dan sesuai dengan kondisi pasien.
            </p>

        </div>

        <!-- ILUSTRASI -->
        <div class="relative">

            <div class="bg-white rounded-3xl border border-green-100 p-8 shadow-sm">

                <div class="space-y-5">

                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-green-50">

                        <div class="w-14 h-14 rounded-2xl bg-green-100 flex items-center justify-center">
                            <i class="ri-user-search-line text-2xl text-green-700"></i>
                        </div>

                        <div>
                            <h3 class="font-bold text-gray-800">
                                Analisis Kondisi Pasien
                            </h3>

                            <p class="text-sm text-gray-500 mt-1 leading-6">
                                Sistem mempertimbangkan gejala gastritis, aktivitas harian,
                                berat badan, tinggi badan, umur, dan jenis kelamin pasien.
                            </p>
                        </div>

                    </div>

                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-emerald-50">

                        <div class="w-14 h-14 rounded-2xl bg-emerald-100 flex items-center justify-center">
                            <i class="ri-scales-3-line text-2xl text-emerald-700"></i>
                        </div>

                        <div>
                            <h3 class="font-bold text-gray-800">
                                Perhitungan Metode SAW
                            </h3>

                            <p class="text-sm text-gray-500 mt-1 leading-6">
                                Data makanan dihitung melalui normalisasi, pembobotan kriteria,
                                nilai preferensi, dan perangkingan alternatif makanan.
                            </p>
                        </div>

                    </div>

                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-teal-50">

                        <div class="w-14 h-14 rounded-2xl bg-teal-100 flex items-center justify-center">
                            <i class="ri-restaurant-line text-2xl text-teal-700"></i>
                        </div>

                        <div>
                            <h3 class="font-bold text-gray-800">
                                Rekomendasi Makanan
                            </h3>

                            <p class="text-sm text-gray-500 mt-1 leading-6">
                                Sistem menampilkan makanan terbaik beserta skor SAW, porsi,
                                ukuran porsi, frekuensi makan, komposisi, dan alternatif serupa.
                            </p>
                        </div>

                    </div>

                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-cyan-50">

                        <div class="w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center">
                            <i class="ri-file-list-3-line text-2xl text-cyan-700"></i>
                        </div>

                        <div>
                            <h3 class="font-bold text-gray-800">
                                Laporan Rekomendasi
                            </h3>

                            <p class="text-sm text-gray-500 mt-1 leading-6">
                                Hasil rekomendasi disimpan sebagai riwayat laporan dan dapat
                                dilihat kembali atau dicetak sebagai dokumen rekomendasi.
                            </p>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

    <!-- GRAFIK -->
<div class="mt-10 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">

    <!-- HEADER -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">

        <div>

            <h2 class="text-xl font-bold text-gray-800">
                Statistik Sistem
            </h2>

            <p class="text-sm text-gray-500 mt-1">
                Visualisasi data berdasarkan periode waktu
            </p>

        </div>

        <div class="flex flex-wrap gap-3">

            <!-- PILIH DATA -->
            <select id="jenisGrafik"
                class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-700 focus:outline-none">

                <option value="pasien">Data Pasien</option>
                <option value="makanan">Data Makanan</option>
                <option value="laporan">Riwayat Rekomendasi</option>

            </select>

            <!-- RANGE -->
            <select id="rangeGrafik"
                class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-700 focus:outline-none">

                <option value="harian">Harian</option>
                <option value="mingguan">Mingguan</option>
                <option value="bulanan">Bulanan</option>

            </select>

        </div>

    </div>

    <!-- CHART -->
    <div class="h-[280px] sm:h-[350px]">

        <canvas id="dashboardChart"></canvas>

    </div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    const ctx = document.getElementById('dashboardChart');

    // =========================
    // DATA DUMMY
    // =========================
    // Nanti bisa diganti dari database/controller

    const chartData = {

    pasien: {

        harian: @json($pasienHarian),
        mingguan: @json($pasienMingguan),
        bulanan: @json($pasienBulanan)

    },

    makanan: {

        harian: @json($makananHarian),
        mingguan: @json($makananMingguan),
        bulanan: @json($makananBulanan)

    },

    laporan: {

        harian: @json($laporanHarian),
        mingguan: @json($laporanMingguan),
        bulanan: @json($laporanBulanan)

    }

};

    // =========================
    // LABEL
    // =========================
    const labels = {

        harian: ['Sen','Sel','Rab','Kam','Jum','Sab','Min'],
        mingguan: ['M1','M2','M3','M4'],
        bulanan: ['6 Bulan Lalu','5 Bulan','4 Bulan','3 Bulan','2 Bulan','Bulan Ini']

    };

    // =========================
    // DEFAULT
    // =========================
    let selectedJenis = 'pasien';
    let selectedRange = 'harian';

    // =========================
    // INIT CHART
    // =========================
    const dashboardChart = new Chart(ctx, {

        type: 'bar',

        data: {

            labels: labels[selectedRange],

            datasets: [{

            label: 'Jumlah Data',

            data: chartData[selectedJenis][selectedRange],

            borderWidth: 1,
            borderRadius: 10,
            barThickness: 40

        }]
        },

        options: {

            responsive: true,

            maintainAspectRatio: false,

            plugins: {

                legend: {
                    display: false
                }
            },

            scales: {

                y: {

                    beginAtZero: true,

                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });

    // =========================
    // UPDATE CHART
    // =========================
    function updateChart() {

        selectedJenis =
            document.getElementById('jenisGrafik').value;

        selectedRange =
            document.getElementById('rangeGrafik').value;

        dashboardChart.data.labels =
            labels[selectedRange];

        dashboardChart.data.datasets[0].data =
            chartData[selectedJenis][selectedRange];

        dashboardChart.update();
    }

    // =========================
    // EVENT
    // =========================
    document.getElementById('jenisGrafik')
        .addEventListener('change', updateChart);

    document.getElementById('rangeGrafik')
        .addEventListener('change', updateChart);

</script>

@endsection