@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')

<div class="row">

    <!-- PASIEN -->
    <div class="col-md-3 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>

    <!-- DIAGNOSA -->
    <div class="col-md-3 mb-3">
        <div class="card shadow-sm text-white bg-success">
            <div class="card-body">
                <h5>Total Diagnosa</h5>
                <h2>{{ $totalDiagnosa }}</h2>
            </div>
        </div>
    </div>

    <!-- PENYAKIT -->
    <div class="col-md-3 mb-3">
        <div class="card shadow-sm text-white bg-warning">
            <div class="card-body">
                <h5>Total Penyakit</h5>
                <h2>{{ $totalPenyakit }}</h2>
            </div>
        </div>
    </div>

    <!-- GEJALA -->
    <div class="col-md-3 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 Diagnosa</h5>
        <canvas id="chartDiagnosa"></canvas>
    </div>
</div>

@endsection


@push('scripts')

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

<script>
const dataChart = {
    labels: [
        @foreach($chart as $c)
            "{{ $c->penyakit->nama }}",
        @endforeach
    ],
    datasets: [{
        label: 'Jumlah Diagnosa',
        data: [
            @foreach($chart as $c)
                {{ $c->total }},
            @endforeach
        ]
    }]
};

const config = {
    type: 'bar',
    data: dataChart,
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        }
    }
};

new Chart(document.getElementById('chartDiagnosa'), config);
</script>

@endpush