@if(isset($card) && !empty($card))
<div class="container py-3">
    <div class="row justify-content-center">
        @foreach ($card as $item)
        <div class="col p-0">
           @include('reports.card', [
                'name'  => $item['name'], 
                'value' => $item['value'], 
                'type'  => $item['type'], 
                'icon'  => $item['icon']
            ])
        </div>
        @if(!$loop->last)
        <div class="col-auto"></div>
        @endif
        @endforeach
    </div>
</div>
@endif
 
<div class="card shadow mb-4">
    <!-- Card Header - Dropdown -->
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">{{$name}}</h6>
        {{--
        <div class="dropdown no-arrow">
            <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
            </a>
            
            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                <div class="dropdown-header">Dropdown Header:</div>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
        --}}
    </div>
    <!-- Card Body -->
    <div class="card-body">
            <canvas id="{{$id}}"></canvas>
    </div>
</div>

@push('scripts')
<script>
// info https://www.chartjs.org/docs/latest/getting-started/
new Chart(document.getElementById('{{$id}}'), {
    type: '{{$type}}',
    data: {
        labels: ["{!! implode('","', $label) !!}"],
        datasets: [{
        label: '{{$name}}',
        data: [{{ implode(',', $data) }}],
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function (value, index, values) {
                        return value.toLocaleString('hu-HU') + ' {{$unit}}';
                    },
                },
            },
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function (context) {
                    return ' ' + context.formattedValue + ' {{$unit}}';
                    },
                },
            },
        },
    }
});
</script>
@endpush