@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">CHARTS</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">@lang('dashboard.welcome') </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div id="chart" style="background: #fff;"></div>

        </div>

    @endsection

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

        <script>
            const grossProfit = @json($gross_profits);
            const totalExpenses = @json($total_expenses);
            var options = {
                series: [44, 55],
                labels: ['Apple', 'Mango']
                ,
                                chart: {
                    type: 'donut'
                }
                }


            var chart = new ApexCharts(document.querySelector("#chart"), options);

            chart.render();

        </script>
    @endsection