@extends('layouts.app')

@section('content')
    <div class="row">

        <div class="col-xl-12">

            @can('manage_dashboard_cards')
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card mini-stats-wid">
                            <div class="card-body">

                                <div class="d-flex flex-wrap">
                                    <div class="me-3">
                                        <p class="text-muted mb-2">Today Invoices</p>
                                        <h5 class="mb-0">{{ round($data['today_sales_count'], 2) }}</h5>
                                    </div>

                                    <div class="avatar-sm ms-auto">
                                        <div class="avatar-title bg-light rounded-circle text-success font-size-20">
                                            <i class="bx bx-bar-chart-alt-2"></i>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="card blog-stats-wid">
                            <div class="card-body">

                                <div class="d-flex flex-wrap">
                                    <div class="me-3">
                                        <p class="text-muted mb-2">Today Sales Amount</p>
                                        <h5 class="mb-0">{{ number_format($data['today_sales'], 2) }}</h5>
                                    </div>

                                    <div class="avatar-sm ms-auto">
                                        <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                            <i class="bx bx-basket"></i>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card blog-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="me-3">
                                        <p class="text-muted mb-2">This Month Sales</p>
                                        <h5 class="mb-0">{{ number_format($data['month_sales'], 2) }}</h5>
                                    </div>

                                    <div class="avatar-sm ms-auto">
                                        <div class="avatar-title bg-light rounded-circle text-info font-size-20">
                                            <i class="bx bx-wallet-alt"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>
                <!-- end row -->
            @endcan

            @can('manage_dashboard_daywise_chart')
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-wrap align-items-start">
                            <h5 class="card-title me-2">Last 7 Days Sales</h5>
                        </div>

                        <div class="row text-center">
                            <div class="col-lg-12">
                                <div id="chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endcan
        </div>
        <!-- end col -->



    </div>
    <!-- end row -->
@endsection


@push('scripts')

    @can('manage_dashboard_daywise_chart')
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

        <script>
            // Declare chartData globally
            var chartData = {
                series: [{
                    name: 'Sales',
                    data: []
                }],
                chart: {
                    height: 350,
                    type: 'bar', // Column chart type
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: []
                },
                yaxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return "₹ " + val
                        }
                    }
                }
            };


            fetch('{{ route('chart.sevendayssales') }}')
                .then(response => response.json())
                .then(data => {
                    // Update chartData with the received data
                    chartData.series[0].data = data.map(item => item.totalAmount);
                    chartData.xaxis.categories = data.map(item => item.date);

                    // Initialize the chart
                    var chart = new ApexCharts(document.querySelector("#chart"), chartData);
                    chart.render();
                });
        </script>
    @endcan

@endpush