@extends('layouts.main')
@section('content')
    <div class="justify-content-between mt-1 p-3">
        <div class="row">
            <div class="col-md-4">
                <div class="card back-user">
                    <div class="card-body">
                        <h5 class="card-title">Jumlah customer</h5>
                        <p class="card-text">{{ $jumlahUserAktif }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card back-pendapatan-bulan">
                    <div class="card-body">
                        <h5 class="card-title">Transaksi hari ini</h5>
                        <p class="card-text">{{ $totalTransaksi }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card back-pendapatan-harian">
                    <div class="card-body">
                        <h5 class="card-title">Pendapatan Harian</h5>
                        <p class="card-text">Rp {{ number_format($totalPendapatanHarian) }}</p>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="row mt-3">
            <div class="col-md-4">
                <div class="card back-user">
                    <div class="card-body">
                        <h5 class="card-title">Transaksi hari ini</h5>
                        <p class="card-text">123</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card back-pendapatan-bulan">
                    <div class="card-body">
                        <h5 class="card-title">Jumlah Barang Terjual</h5>
                        <p class="card-text">10</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card back-pendapatan-harian">
                    <div class="card-body">
                        <h5 class="card-title">Jumlah </h5>
                        <p class="card-text">Rp 300.000</p>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>

    <div class="container-fluid mt-5 ">
        <div id="container" class="mt-5 ">

        </div>
    </div>
@endsection

@section('footer')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Laporan Penjualan Di Nusa Dua Agro',
                    align: 'center'
                },
                xAxis: {
                    categories: [
                        @foreach ($label as $bulan)
                            '{{ $bulan }}',
                        @endforeach
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Jumlah Pendapatan'
                    }
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.category + ': Rp ' + Highcharts.numberFormat(this.point.y, 0,
                                ',', '.') +
                            '</b>';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Pendapatan',
                    data: [
                        @foreach ($jumlah_pendapatan_values as $data)
                            {{ $data }},
                        @endforeach
                    ]
                }]
            });
        });
    </script>
@endsection