@extends('layouts.app')

@section('content')
<div class="p-4">
    <h1 class="text-xl font-bold mb-4">Dashboard Penjualan & Pembelian</h1>

    <div class="bg-white rounded shadow p-4">
        <form method="GET" class="mb-4 flex flex-wrap items-center gap-2 text-sm">
            <label for="from">Dari:</label>
            <input type="date" name="from" value="{{ $from }}" class="border rounded p-1">
        
            <label for="to">Sampai:</label>
            <input type="date" name="to" value="{{ $to }}" class="border rounded p-1">
        
            <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded">Filter</button>
            <a href="{{ route('dashboard') }}" class="text-gray-500 underline">Reset</a>
        </form>
        <canvas id="salesChart" height="120"></canvas>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('salesChart').getContext('2d');
    const salesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [
                {
                    label: 'Penjualan',
                    data: {!! json_encode($chartSales) !!},
                    backgroundColor: 'rgba(34,197,94,0.8)', // green
                },
                {
                    label: 'Pembelian',
                    data: {!! json_encode($chartPurchases) !!},
                    backgroundColor: 'rgba(59,130,246,0.8)', // blue
                },
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    ticks: {
                        callback: value => 'Rp' + value.toLocaleString('id-ID')
                    }
                }
            }
        }
    });
</script>
@endsection