@foreach($charts as $chart)
    <style>
        .apexcharts-menu-item {
            color: black !important;
        }
    </style>
    <div class="card mb-3">
        <div class="card-body">
            <h3 class="card-title">{{ $chart['name'] }}</h3>
            <div id="chart{{ sha1($chart['name']) }}" class="chart-lg" style="min-height: 240px;padding-top: 15px;">
            </div>
        </div>
    </div>
@endforeach

@foreach($charts as $chart)
    <script>
        var options = {
            series: [{
                name: "Earnings (in USD)",
                data: [
                    @foreach($chart['data'] as $price)
                        {{ $price ?? 0 }},
                    @endforeach
                ]
            }],
            chart: {
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'straight'
            },
            grid: {
                row: {
                    colors: ['transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                },
            },
            xaxis: {
                categories: [
                    @foreach(array_keys($chart['data']) as $category)
                        '{{ $category }}',
                    @endforeach
                ],
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart{{ sha1($chart['name']) }}"), options);
        chart.render();
    </script>
@endforeach