@extends('index')
@section('title', Helper::getSiteTitle('Mining'))

@section('content')
@php
$worker_ids = $workers_osrs_balance = [];
@endphp
<main class="dashboardMain">
    @include('includes.dashboard-nav')
    <div class="dashboard-row">
        <div class="dashboard-content">
            <h4 class="table-title">{{ !empty($worker->name) ? $worker->name : 'Worker ' . $worker->id }}</h4>
            <div class="chart-container">
                <canvas id="chart"></canvas>
            </div>
        </div>
    </div>
</main>
@endsection

@section('js-lib')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
@endsection

@section('js')
<script>
$(document).ready(function(){

    if ($("#chart").length)
    {
        var options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'OSRS Payments'
                }
            }
        };

        data = {
            labels: {!! json_encode($time) !!},
            datasets: [
                {
                    label: 'OSRS Payments',
                    data: {!! json_encode($data) !!},
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                }
            ]
        };

        new Chart('chart', {
            type: 'line',
            options: options,
            data: data
        });
    }
});
</script>
@endsection