@extends('layouts.admin.app')

@section('title','Chart Laporan Obat')

@section('content')
<h4>Laporan Obat per Bulan</h4>

<form method="GET" class="mb-3">
    <select name="year" class="form-select w-auto d-inline">
        @for($y = date('Y'); $y >= date('Y')-5; $y--)
            <option value="{{ $y }}" {{ $year==$y?'selected':'' }}>
                {{ $y }}
            </option>
        @endfor
    </select>
    <button class="btn btn-primary btn-sm">Tampilkan</button>
</form>

<div class="card">
    <div class="card-body">
        <canvas id="medicineChart" height="120"></canvas>
    </div>
</div>

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

<script>
const ctx = document.getElementById('medicineChart');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($labels) !!},
        datasets: [
            {
                label: 'Jumlah Pemakaian',
                data: {!! json_encode($qtyData) !!},
                borderWidth: 1
            },
            {
                label: 'Total Nilai (Rp)',
                data: {!! json_encode($salesData) !!},
                borderWidth: 1,
                type: 'line'
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
});
</script>
@endsection