@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')

<div class="row">

    <!-- PASIEN -->
    <div class="col-md-4 mb-3">
        <div class="card shadow-sm text-white bg-primary">
            <div class="card-body">

                <h5>Total Pasien</h5>

                <h2>{{ $totalPasien }}</h2>

            </div>
        </div>
    </div>

    <!-- DETEKSI DINI -->
    <div class="col-md-4 mb-3">
        <div class="card shadow-sm text-white bg-success">
            <div class="card-body">

                <h5>Total Deteksi Dini</h5>

                <h2>{{ $totalDiagnosa }}</h2>

            </div>
        </div>
    </div>

    <!-- GEJALA -->
    <div class="col-md-4 mb-3">
        <div class="card shadow-sm text-white bg-danger">
            <div class="card-body">

                <h5>Total Gejala</h5>

                <h2>{{ $totalGejala }}</h2>

            </div>
        </div>
    </div>

</div>


<!-- GRAFIK -->

<div class="card shadow-sm mt-4">

    <div class="card-body">

        <h5 class="mb-3">

            Grafik Hasil Deteksi Dini

        </h5>

        <canvas id="chartDiagnosa"></canvas>

    </div>

</div>

@endsection


@push('scripts')

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

<script>

const dataChart = {

    labels: [

        @foreach($chart as $c)

            "{{ $c['label'] }}",

        @endforeach

    ],

    datasets: [{

        label: 'Jumlah Deteksi Dini',

        data: [

            @foreach($chart as $c)

                {{ $c['total'] }},

            @endforeach

        ],

        borderWidth: 1,

        backgroundColor: [

            '#198754',
            '#0d6efd',
            '#ffc107',
            '#dc3545'

        ]

    }]

};


const config = {

    type: 'bar',

    data: dataChart,

    options: {

        responsive: true,

        plugins: {

            legend: {

                display: false

            }

        },

        scales: {

            y: {

                beginAtZero: true,

                ticks: {

                    precision: 0

                }

            }

        }

    }

};


new Chart(

    document.getElementById('chartDiagnosa'),

    config

);

</script>

@endpush