@extends('companyuser::layouts.master')
@section('header')
@endsection
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/dashboard/index.css') }}">
    <style>
        ol{
            margin-left: 10px;
        }
        ol li{
            list-style: decimal;
            padding-bottom: 15px;
            font-size: 15px;
        }
        .progress{
            width: inherit !important;
        }
        .fiscal_year_select{
            width: 20% !important;
            height: 30px!important;
        }
        .pb-30{
            padding-bottom: 30px;
        }
        .color-unset{
            color: unset !important;
        }
        .profit_loss_section{
            border: 1px solid #cccfd1 !important;
            margin-bottom: 0.875rem !important;
        }
        .settings-alert {
            padding: .75rem 1rem;
            border: 1px solid transparent;
            border-radius: .25rem;
        }
        #startup_modal.fade.in{
            background-color: #009c84c2;
        }
        /* Net Promoter Score */
        #npsScore_modal .modal-content {
            background: linear-gradient(#d9e7ed, #f8feff);
        }
        .nps-icon-1{
            width: 15%;
            display: flex;
            margin: auto;
        }
        #npsScore_modal.fade.in{
            background-color: #009c84c2;
        }
        .nextBtnNPS, .npsSubmitBtn{
            font-size: 17px !important;
            line-height: 10px !important;
            width: 175px !important;
        }
        .npsReasonField {
            margin-left: 20%;
            margin-right: 20%;
            margin-top: 10px;
        }
        .npsScoreField{
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            border: solid 1px #ccc;
            border-radius: 10px;
            padding: 20px;
        }
        .rating {
            margin-bottom: 20px;
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
        }
        .rating input {
            display: none;
        }
        .rating label {
            font-size: 24px;
            cursor: pointer;
        }
        .rating label:hover,
        .rating label:hover ~ label {
            border: solid 2px #179b87;
        }
        .inner{
            position:absolute;
            width: 0px;
            height:0px;
            background-color: transparent;
            padding: 15px;
            border-radius:50%;
            left: 5px;
            top: 5px;
        }
        .rating label:hover .inner{
            background-color:#179b87;
        }
        #npsScore_modal label{
            position: relative;
            border: solid 2px #bbb;
            border-radius: 50%;
            width: 5px;
            height: 5px;
            padding: 20px;
            margin: 7px;
        }
        .rating input:checked ~ label span {
                background-color:#179b87;
        }
        .rating input:checked ~ label {
            color: orange;
            border: solid 2px #179b87;
        }
        /* Net Promoter Score */
        select.filter-select{
            width: auto;
            margin: 0 auto;
            border: none;
        }
        .popover{
            z-index: 999999;
        }
	</style>
    <link href="{{ url('assets/css/plugins/imageUpload/style.css') }}" rel="stylesheet">
    <link href="{{url('assets/css/plugins/country/country.css')}}" rel="stylesheet">
    <link href="{{url('assets/css/startup-guidance/style.css')}}" rel="stylesheet">
    <link href="{{ url('assets/css/custom/dashboard/tooltip.css') }}" rel="stylesheet">
    <link href="{{asset('assets/css/steps.css') }}" rel="stylesheet">
    <link href="{{asset('assets/css/uploader.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/reports/index.css') }}">
    @if(app()->getLocale() == 'ar')
        <style>
            .popover
            {
                transform: translateX(-266px) translateY(33px) translateZ(0px) !important;
            }
            @media (max-width: 991px) {
                .popover{
                    transform: translateX(-56px) translateY(33px) translateZ(0px) !important;
                }
            }
        </style>
    @else
        <style>
            @media (max-width: 767px) {
                .popover {
                    transform: translateX(8px) translateY(76px) translateZ(0px) !important;
                }
            }
            @media (max-width: 768px) and (min-width: 767px){
                .popover {
                    transform: translateX(56px) translateY(76px) translateZ(0px) !important;
                }
            }
            .settings-alert:after {
                height: 95px;
                 left: unset;
                top: -12px;
                float: right;
            }
        </style>
    @endif
@endsection
@section('title','VOM')
@section('content')
@include('superadmin::errors.lists')
<input type="hidden" name="token" id="token" value="{{ $token }}">
<!--stats-->
<div class="content-body">
        <div class="row" style="margin-left: -20px;margin-right: -20px;">
        @if(!$genralSettingsCount || !$accountingSettingsCount)
                <div class="col-md-12  col-xs-12 text-center">
                    <div class="alert alert-white settings-alert" >
                        @lang('superadmin::Dashboard.Please set your ') &nbsp;
                        @if(!$genralSettingsCount)
                        <a class="blue darken-2" href="{{route('company.general-settings.index', $subdomain)}}">
                            @lang('settings::general_settings.general settings')</a>
                        @endif
                        &nbsp;
                        @if(!$accountingSettingsCount)
                        {{!$genralSettingsCount ? ',' : ''}}  &nbsp;<a class="blue darken-2" href="{{route('company.accounting-settings.index', $subdomain)}}">
                            @lang('settings::general_settings.accounting settings') </a>
                        @endif
                        &nbsp; @lang('superadmin::Dashboard.to start adding accounting transactions')

                    </div>
                </div>
            @endif
        </div>

    <div class="row">
        @if($thereIsEmptyTable)
            @include('companyuser::dashoard-cards-section')
        @endif
        @include('companyuser::income-chart-index')

    </div>
</div>
<input type="hidden" value="{{$dashboard_steps_done}}" id="dashboard_steps_done">
<input type="hidden" value="{{$user_is_company_owner}}" id="user_is_company_owner">
@include('companyuser::startup-guidance.guidance_modal')
@include('companyuser::startup-guidance.nps_score_modal')
@endsection
@section('extra_scripts')

    <script>
        gtag('event', 'web_dashboard');
        console.log('web_dashboard event');
    </script>
    @if(Request::route()->getName()!="company.dashboard-home")
        <!--
            this will be active in the future when we add some charts
            I made this if to take care if it used in other page not the index on company page
        -->
        <!-- BEGIN PAGE VENDOR JS-->
        <script src="{{ asset('/assets/vendors/js/extensions/jquery.knob.min.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/js/scripts/extensions/knob.js') }}" type="text/javascript" defer></script>
        <script src=" {{ asset('/assets/vendors/js/charts/raphael-min.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/charts/morris.min.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/charts/jvector/jquery-jvectormap-2.0.3.min.js') }}" type="text/javascript" defer>
        </script>
        <script src="{{ asset('/assets/vendors/js/charts/jvector/jquery-jvectormap-world-mill.js') }}" type="text/javascript" defer>
        </script>
        <script src="{{ asset('/assets/data/jvector/visitor-data.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/charts/chart.min.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/charts/jvector/jquery-jvectormap-world-mill.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/charts/jquery.sparkline.min.js') }}" type="text/javascript" defer></script>
        <script src="{{ asset('/assets/vendors/js/extensions/unslider-min.js') }}" type="text/javascript" defer></script>
        <link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/core/colors/palette-climacon.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('/assets/fonts/simple-line-icons/style.min.css') }}">
        <!-- END PAGE VENDOR JS-->
        <!-- BEGIN PAGE LEVEL JS-->
        <script src="{{ asset('/assets/js/scripts/pages/dashboard-analytics.js') }}" type="text/javascript" defer></script>
        <!-- END PAGE LEVEL JS-->
    @endif
    <script src="{{url('assets/js/plugins/country/country.js')}}" defer></script>
    <script src="{{url('assets/js/plugins/country/countryScript.js')}}" defer></script>
    <script src="{{ url('assets/js/plugins/imageUpload/script.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/settings.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/import.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/import-customer.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/import-supplier.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/import-product.js') }}" defer></script>
    <script src="{{ url('assets/js/startup-guidance/import-account-balance.js') }}" defer></script>
    <script src="{{ asset('/assets/js/scripts/progressbar.min.js') }}" type="text/javascript" defer></script>
    <script src="{{ asset('/assets/js/custom/chartjs/chart.min.js') }}" type="text/javascript" defer></script>
    <script src="{{ asset('/assets/js/custom/chartjs/chartjs-plugin-labels.js') }}" type="text/javascript" defer></script>
    <script>
        var currentTab = 0; // Current tab is set to be the first tab (0)
        window.onload = function onLoad() {
            @can('dashboard.profit-and-loss.view')
                drawIncomeStatement()
            @endcan

            @can('dashboard.invoices.view')
                drawSalesChart();
            @endcan

            @can('dashboard.sales-summary.view')
                drawSalesSummaryChart();
            @endcan

            @can('dashboard.purchase-bills.view')
                drawPurchasesChart();
            @endcan

            @can('dashboard.purchases-summary.view')
                drawPurchasesSummaryChart();
            @endcan

            @can('dashboard.expenses-summary.view')
                drawExpensesSummaryChart()
            @endcan

            // Toggle plus minus icon on show hide of collapse element
            $(".collapse").on('show.bs.collapse', function () {
                $(this).prev(".card-header").find(".expand-collapse").removeClass("fa-angle-down").addClass("fa-angle-up");
            }).on('hide.bs.collapse', function () {
                $(this).prev(".card-header").find(".expand-collapse").removeClass("fa-angle-up").addClass("fa-angle-down");
            });

            if('{{$show_startup_guidance}}' === '0') {
                $('#startup_modal').modal('show');
            }

            // let x = new Date(Date.now());
            // let datex = x.toUTCString();
            // document.cookie = "nps_user_score=1; expires=" + datex;
            if('{{$nps_user_score}}' === '0' && document.cookie.indexOf('nps_user_score') == -1 && checkUserCreatedAtPassedThirtyDays()) {
                $('#npsScore_modal').modal('show');
            }

            $('.niceCountryInputMenuInputHidden').val($('.niceCountryInputSelector').data('selectedcountry'));
            $('#inputGroupFile01').on('change', function(e) {
                $('.image_file_size_error').addClass('hidden');
                $('#is_valid_image_size').val("1");
                // Bail early if no file has been chosen (nothing to validate)
                if (!this.files || !this.files.length) {
                    return;
                }
                const size = (this.files[0].size / 1024 / 1024).toFixed(2);
                if (size > 2) {
                    $('.image_file_size_error').removeClass('hidden');
                    $(this).val("");
                    $('#is_valid_image_size').val("0");
                    $('#save_continue').prop('disabled', true);
                    return false;
                }else{
                    $('#save_continue').prop('disabled', false);
                }
            });

            $('#setting_form').submit(function (e) {
                e.preventDefault();
                if($('#is_valid_image_size').val() == "1"){
                    saveSettings();
                }
            });
            showTab(currentTab); // Display the current tab
            $('[data-toggle="tooltip"]').tooltip();
            $('#purchases_filter').on('change', function(e) {
                $('#dashboard_form').submit();
             });

             $('#sales_filter').on('change', function(e) {
                $('#dashboard_form').submit();
             });

             $('#expenses_filter').on('change', function(e) {
                $('#dashboard_form').submit();
             });

            $(".nextBtnNPS").attr('disabled', true);
            var rating = 0;
            $('.rating label').on('click', function(){
                var labelVal = $(this).attr('for');
                rating = $('input[id="'+labelVal+'"]').val();
                $(".nextBtnNPS").removeAttr('disabled');
            });

            $('.dismiss-nps-btn').on('click',function(e){
                e.preventDefault();
                var shortMonth = new Date(Date.now());
                shortMonth.setMonth(shortMonth.getMonth() + 1);
                date = shortMonth.toUTCString(); // '2022-03-04T00:00:00.000Z'
                document.cookie = "nps_user_score=1; expires=" + date;
            })

            $('.npsSubmitBtn').on('click',function(e){
                e.preventDefault();
                let npsScoreUrl = '{{route("company.startup-guidance.nps.score", [$subdomain])}}';
                var reason = $("#npsReasonfield").val();
                $("#validation-messages .rate").text('');
                $("#validation-messages .reason").text('');

                if (!rating) {
                    $("#validation-messages .rate").text('{{ __("validation.required", ["attribute" => __("superadmin::Dashboard.rate")]) }}');
                    return;
                }

                $.ajax({
                    url: npsScoreUrl,
                    dataType: 'json',
                    type: "get",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        rate: rating,
                        reason: reason,
                    },
                    success: function(response) {
                        if (response.errors) {
                            let errors = response.errors;
                            let rateError = errors.rate ? errors.rate[0] : '';
                            $("#validation-messages .rate").text(rateError);
                            let reasonError = errors.reason ? errors.reason[0] : '';
                            $("#validation-messages .reason").text(reasonError);
                        }else{
                            const shortMonth = new Date(Date.now());
                            shortMonth.setMonth(shortMonth.getMonth() + 2);
                            date = shortMonth.toUTCString(); // '2022-03-04T00:00:00.000Z'
                            document.cookie = "nps_user_score=1; expires=" + date;
                            $('#npsScore_modal').modal('hide');
                        }
                    },
                    error: function(xhr, status, error) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            const rateError = errors.rate ? errors.rate[0] : '';
                            const reasonError = errors.reason ? errors.reason[0] : '';
                            $("#validation-messages .rate").text(rateError);
                            $("#validation-messages .reason").text(reasonError);
                            return;
                        }

                        let fallbackMessage = '{{ __("superadmin::Dashboard.nps_submit_failed") }}';
                        if (xhr.status === 403) {
                            fallbackMessage = '{{ __("superadmin::Dashboard.nps_permission_denied") }}';
                        } else if (xhr.status === 401) {
                            fallbackMessage = '{{ __("superadmin::Dashboard.nps_auth_required") }}';
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            fallbackMessage = xhr.responseJSON.message;
                        }

                        $("#validation-messages .rate").text(fallbackMessage);
                        if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
                            window.Sentry.captureMessage('NPS submit failed', {
                                level: 'error',
                                extra: {
                                    status: xhr.status,
                                    statusText: status,
                                    error: error
                                }
                            });
                        }
                    },
                });
            })

            // NPS Score
            function checkUserCreatedAtPassedThirtyDays() {
                var user = '{{auth()->user()}}';
                var userCreatedAt = JSON.parse(user.replace(/&quot;/g,'"').replace(/\\/g, "\\\\")).created_at;
                var myDate = new Date(userCreatedAt);
                var today = new Date();
                var thirtyDays = 1000*60*60*24*30;
                if ( today - myDate > thirtyDays) {
                    return true;
                }
                return false;
            }
             // VoM AI Starts Here
            function prepareRequestData(TriggerButtonElement){
                let Message;
                const Component = TriggerButtonElement.data('component');
                const RequestUrl = TriggerButtonElement.data('url');
                const From = TriggerButtonElement.data('from') ?? 'Initial Generation';
                const RefreshCache = TriggerButtonElement.data('refresh-cache') ?? 0;
                const Data = TriggerButtonElement.data('data');
                if(From == 'Conversation'){
                    Message = TriggerButtonElement.parent().find('input[name="vom_ai_input"]').val();
                }else{
                    Message = TriggerButtonElement.data('message') ?? 'Generate insights from this data assuming the key is the day and the value is ' + Component.replace('Summary', ' amount');
                }
                return {
                    data: Data,
                    message: Message,
                    component: Component,
                    page_url: RequestUrl,
                    from: From,
                    refresh_cache: RefreshCache,
                    language: $('meta[name="language"]').attr('content')
                }
            }

            // Disable the Enter button
            $('input[name="vom_ai_input"]').bind("keypress", function (e) {
                if (e.keyCode == 13) {
                    return false;
                }
            });

            // AI Cards
            $('.vom-ai-trigger').click(function(e){
                // Prepare the request data
                const data = prepareRequestData($(this));
                const ResponseContainer = $(this).parent().parent().parent().find('.ai-response');
                if (data.message.trim() == ''){
                    e.preventDefault();
                    ResponseContainer.html('<div>@lang("companyuser::vom_ai.empty_message")</div>');
                    return;
                }
                e.preventDefault();
                $(this).parent().parent().parent().find('.ai-insights-card').fadeIn();
                ResponseContainer.html('<div class="generating-placeholder">@lang("companyuser::vom_ai.generating") <i class="fa fa-spinner fa-spin"></i></div>');
                // Send AI request to the be
                $.ajax({
                    url: '{{ route('ai.generate', $subdomain) }}',
                    method: 'post',
                    data: data,
                    success: function(response){
                        // Update the content
                        ResponseContainer.html('').html(response);
                    },
                    error: function(){
                        // Update the content
                        ResponseContainer.html('Error communicating with VoM AI');
                    }
                })


            })
            $('.close-ai-card-button').click(function(e){
                e.preventDefault();
                $(this).parent().fadeOut();
            });
        };

        function showTab(n) {
            // This function will display the specified tab of the form...
            var guidanceTabs = document.getElementsByClassName("guidance-tab");
            var npsScoreTabs = document.getElementsByClassName("nps-score-tab");
            if (guidanceTabs[n]) {
                guidanceTabs[n].style.display = "block";
            }
            if (npsScoreTabs[n]) {
                npsScoreTabs[n].style.display = "block";
            }
            fixStepIndicator(n)
        }
        function nextNps(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("nps-score-tab");
            // Exit the function if any field in the current tab is invalid:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }
        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("guidance-tab");
            // Exit the function if any field in the current tab is invalid:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }
        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }
        function popoverContent() {
            var id = $(this).attr('id')
            return $('#popover-content-' + id).html();
        }
        function closeDashboardStepsPopup(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formData = new FormData();
            formData.append('token', $('#token').val());
            formData.append('key', 'dashboard_steps_done');
            $.ajax({
                url:'{{route('company.config.store', $subdomain)}}',
                type: 'POST',
                data: formData,
                dataType: "json",
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#dashboard_steps_done').val("1");
                    $("#dashboard_popover").popover('hide');
                }, error: function (xhr, status, error) {
                },complete: function (data) {
                }
            });
        }
        function drawSalesChart() {
            var ctx = document.getElementById("salesPiechart").getContext('2d');
            var paid_value = '{{$totalsPaid['invoices']}}';
            var arc = true;
            var noVal = false;
            if(paid_value === '0' && '{{$totalsNotPaid['invoices']}}' === '0'){
                paid_value = '1';
                noVal = true;
            }
            if(Number(paid_value) === 0 || '{{$totalsNotPaid['invoices']}}' === '0'){
                arc = false;
            }
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                radius:  "90%",
                data: {
                    labels: ['{{__('companyuser::dashboard.total paid')}}', '{{__('companyuser::dashboard.total outstanding')}}'],
                    datasets: [{
                        backgroundColor: [
                            "#31C70F",
                            "#46aedf"
                        ],
                        data: [paid_value, '{{$totalsNotPaid['invoices']}}']
                    }]
                },
                options: getChartOptions(arc, noVal)
            });

        }
        function drawPurchasesChart() {
            var ctx = document.getElementById("purchasesPiechart").getContext('2d');
            var paid_value = '{{$totalsPaid['bills']}}';
            var arc = true;
            var noVal = false;
            if(paid_value === '0' && '{{$totalsNotPaid['bills']}}' === '0'){
                paid_value = '1';
                noVal = true;
            }
            if(Number(paid_value) === 0 || '{{$totalsNotPaid['bills']}}' === '0'){
                arc = false;
            }
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                radius:  "90%",
                data: {
                    labels: ['{{__('companyuser::dashboard.total paid')}}', '{{__('companyuser::dashboard.total outstanding')}}'],
                    datasets: [{
                        backgroundColor: [
                            "#31C70F",
                            "#46aedf"
                        ],
                        data: [paid_value, '{{$totalsNotPaid['bills']}}']
                    }]
                },
                options: getChartOptions(arc, noVal)
            });
        }
        function drawIncomeStatement() {
            var revenue_progress = new ProgressBar.Line('#revenue_progress', {
                strokeWidth: 3,
                easing: 'easeInOut',
                duration: 0,
                color: '#31C70F',
                trailColor: '#eee',
                trailWidth: 1,
                svgStyle: {width: $('#revenue_progress_length').val() + '%', height: '100%'}
            });
            var expense_progress = new ProgressBar.Line('#expense_progress', {
                strokeWidth: 3,
                easing: 'easeInOut',
                duration: 0,
                color: '#46aedf',
                trailColor: '#eee',
                trailWidth: 1,
                svgStyle: {width: $('#expenses_progress_length').val()+ '%', height: '100%'}
            });
            revenue_progress.animate(1);
            expense_progress.animate(1);
        }
        function getChartOptions(arc, noVal) {
            return {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    labels: {
                        render: 'percentage',
                        fontColor: "white",
                        precision: 0,
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                        shadowBlur: 10,
                        shadowOffsetX: -5,
                        shadowOffsetY: 5,
                        arc: arc,
                        overlap: true,
                        showActualPercentages: true,
                        textMargin: 4
                    }
                },tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) {
                            return data['labels'][tooltipItem[0]['index']];
                        },
                        label: function (tooltipItem, data) {
                            return noVal? "" : data['datasets'][0]['data'][tooltipItem['index']];
                        }
                    }
                },
            }
        }
        function drawPurchasesSummaryChart() {
            var chart_keys = @json(array_keys($purchasesSummary));
            var chart_values = @json(array_values($purchasesSummary));
            var chart_label = "{{__('companyuser::dashboard.previous_month')}}";
            if(@json(request("purchases_filter")) == 'current_fiscal_year'){
                chart_label = "{{__('companyuser::dashboard.current_fiscal_year')}}";
            }
            var ctx = document.getElementById('purchasesSummaryChart').getContext('2d');
            var chart = new Chart(ctx, {
                    // The type of chart we want to create
                    type: 'bar',
                    // The data for our dataset
                    data: {
                        labels:  chart_keys ,
                        datasets: [
                            {
                                label: chart_label,
                                data:   chart_values,
                                backgroundColor: "#31C70F",

                        },
                    ]
                },
                options: {
                            scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            legend: {
                display: false
            },
            plugins: {
                        labels: {
                            render: () => {}
                        }
                        }
                }
            });
        }
        function drawSalesSummaryChart() {
            var chart_keys = @json(array_keys($salesSummary));
            var chart_values = @json(array_values($salesSummary));
            var chart_label = "{{__('companyuser::dashboard.previous_month')}}";
            if(@json(request("sales_filter")) == 'current_fiscal_year'){
                chart_label = "{{__('companyuser::dashboard.current_fiscal_year')}}";
            }
            var ctx = document.getElementById('salesSummaryChart').getContext('2d');
            var chart = new Chart(ctx, {
                    // The type of chart we want to create
                    type: 'bar',
                    // The data for our dataset
                    data: {
                        labels:  chart_keys ,
                        datasets: [
                            {
                                label: chart_label,
                                data:   chart_values,
                                backgroundColor: "#31C70F",

                        },
                    ]
                },
                options: {
                            scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            legend: {
                display: false
            },
            plugins: {
                        labels: {
                            render: () => {}
                        }
                        }
                }
            });
        }
        function drawExpensesSummaryChart() {
            var chart_keys = @json(array_keys($expensesSummary));
            var chart_values = @json(array_values($expensesSummary));
            var chart_label = "{{__('companyuser::dashboard.previous_month')}}";
            if(@json(request("sales_filter")) == 'current_fiscal_year'){
                chart_label = "{{__('companyuser::dashboard.current_fiscal_year')}}";
            }
            var ctx = document.getElementById('expensesSummaryChart').getContext('2d');
            var chart = new Chart(ctx, {
                    // The type of chart we want to create
                    type: 'bar',
                    // The data for our dataset
                    data: {
                        labels:  chart_keys ,
                        datasets: [
                            {
                                label: chart_label,
                                data:   chart_values,
                                backgroundColor: "#31C70F",

                        },
                    ]
                },
                options: {
                            scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            legend: {
                display: false
            },
            plugins: {
                        labels: {
                            render: () => {}
                        }
                        }
                }
            });
        }
    </script>
@endsection