@extends('layouts.app')
@section('title')
    {{ 'Demand Spot' }}
@endsection
@push('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('/css/daterangepicker.css') }}" />
<link rel="stylesheet" href="{{ asset('/css/leaflet.css') }}" />
<link rel="stylesheet" href="{{ asset('/css/MarkerCluster.css') }}" />
<link rel="stylesheet" href="{{ asset('/css/MarkerCluster.Default.css') }}" />
<link rel="stylesheet" href="{{ asset('/css/select2-custom.css') }}"  />
<style>
  
    .custom-label {
    font-size: 12px;
    padding: 4px;
    /* Add any additional styling to match your chart labels */
}
.js-pain-point-li:hover {
    background-color:#CDDDF7; /* Replace with the desired background color */
    color:white;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.color-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

#legendContainer ,#legendContainer2 ,#legendContainer3{
    margin-top: -30px;
}
.active-li{
    background-color : #CDDDF6;
}
</style>
@endpush
@section('content')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">Demand Spot</h4>
            <ol class="breadcrumb">
            <li class="breadcrumb-item">
            @if(Auth::user()->role_id == 1)
            <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
            @else
            <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
            @endif
            </li>
                <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">Demand Spot</a></li>
            </ol>
        </div>
    </div>
    <div class="breadcrumb-header justify-content-between">
        <div class="left-content"></div>
        <div class="main-dashboard-header-right d-done">
            {{-- <div>
                <label class="tx-13">Online Sales</label>
                <h5>563,275</h5>
            </div>
            <div>
                <label class="tx-13">Offline Sales</label>
                <h5>783,675</h5>
            </div> --}}
        </div>
    </div>
    <!-- breadcrumb -->
    @include('layouts.message')
    <!-- row -->
    <div id="findStates" data-route="{{ route('businessprofile.find-state') }}"></div>
    <div id="countryMapRoute" data-route="{{ route('chart.getCountryMap') }}"></div>
    <div id="stateMapRoute" data-route="{{ route('chart.getStateMapRoute') }}"></div>
    <div id="findDataWithCountryState" data-route="{{ route('chart.find-data-with-country-state') }}"></div>
    <div id="getTotalNumberOfBusiness" data-route="{{ route('chart.get-total-number-of-business') }}"></div>
    <div id="getPieChartData" data-route="{{ route('chart.get-pie-chart-data') }}"></div>
    <div id="getCommonRevenue" data-route="{{ route('chart.get-common-revenue') }}"></div>
    <div id="getCommonBudget" data-route="{{ route('chart.get-common-budget') }}"></div>
    <div id="getTotalEmployee" data-route="{{ route('chart.get-total-employee') }}"></div>
    <div id="getPaintPointsBudgetRevenue" data-route="{{ route('chart.get-pain-point-budget-revenue') }}"></div>
    <div id="getChartDataForIndustryBusiness" data-route="{{ route('chart.get-chart-data-for-industry-business') }}"></div>
    <div id="getChartDataForBusinessType" data-route="{{ route('chart.get-chart-data-for-business-type') }}"></div>
    <div id="getChartDataForOwnershipGroup" data-route="{{ route('chart.get-chart-data-for-ownership-group') }}"></div>
    <div class="">
        <div id="businessFilterWrap">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mt-3">
                            <select id="countries" class="form-select form-control" multiple>
                                <option></option>
                                @foreach ($chartData['countries'] as $singleCountryKey => $singleCountryValue)
                                    <option value="{{ $singleCountryKey }}">{{ $singleCountryValue }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mt-3">
                            <select id="states" class="form-select form-control" multiple>
                                <option></option>
                            </select>
                        </div>
                        <div class="col-md-4 mt-3">
                            <div id="dateRangeCustom" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
                <div class="card overflow-hidden sales-card bg-primary-gradient">
                    <div class="px-3 pt-3  pb-2 pt-0">
                        <div class="">
                            <h6 class="mb-3 tx-12 text-white">REGISTERED BUSINESSES</h6>
                        </div>
                        <div class="pb-0 mt-0">
                            <div class="d-flex">
                                <div class="">
                                    <h4 class="tx-20 fw-bold mb-1 text-white" id="totalBusinessNumber">
                                        <a href ="{{route('business.list',array('registered_users'=>true))}}" style="color:white">{{ !empty($chartData["totalBusiness"]['currentMonthUserCount']) ? number_format($chartData["totalBusiness"]['currentMonthUserCount'], 0, ',', ',') : "0" }} </a>
                                    </h4>
                                    <p class="mb-0 tx-12 text-white op-7">Compared to last month</p>
                                </div>
                                <span class="float-end my-auto ms-auto">
                                    <i class="fas fa-arrow-circle-{{ !empty($chartData["totalBusiness"]['arrowValue']) ? $chartData["totalBusiness"]['arrowValue'] : "" }} text-white" id="totalBusinessArrow"></i>
                                    <span class="text-white op-7" id="totalBusinessDiff">
                                        {{ !empty($chartData["totalBusiness"]['userCountDifference']) ? $chartData["totalBusiness"]['userCountDifference'] : "" }}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span id="" class="pt-1"></span>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
                <div class="card overflow-hidden sales-card bg-danger-gradient">
                    <div class="px-3 pt-3  pb-2 pt-0">
                        <div class="">
                            <h6 class="mb-3 tx-12 text-white">REVENUE</h6>
                        </div>
                        <div class="pb-0 mt-0">
                            <div class="d-flex">
                                <div class="">
                                    <h4 class="tx-20 fw-bold mb-1 text-white" id="totalOfMostCommonRevenue">
                                        {{ !empty($chartData["commonRevenue"]['name']) ? $chartData["commonRevenue"]['name'] : "0" }}
                                    </h4>
                                    <p class="mb-0 tx-12 text-white op-7">Compared to last month</p>
                                </div>
                                <span class="float-end my-auto ms-auto">
                                    <i class="fas fa-arrow-circle-{{ !empty($chartData["commonRevenue"]['arrowValue']) ? $chartData["commonRevenue"]['arrowValue'] : "" }} text-white" id="totalOfMostCommonRevenueArrow"></i>
                                    <span class="text-white op-7" id="totalOfMostCommonRevenueDiff">
                                        {{ !empty($chartData["commonRevenue"]['percentage']) ? $chartData["commonRevenue"]['percentage'] : "" }}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span id="" class="pt-1"></span>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
                <div class="card overflow-hidden sales-card bg-success-gradient">
                    <div class="px-3 pt-3  pb-2 pt-0">
                        <div class="">
                            <h6 class="mb-3 tx-12 text-white">CURRENT BUDGET</h6>
                        </div>
                        <div class="pb-0 mt-0">
                            <div class="d-flex">
                                <div class="">
                                    <h4 class="tx-20 fw-bold mb-1 text-white" id="totalOfMostCommonBudget">
                                        {{ !empty($chartData["commonBudget"]['name']) ? $chartData["commonBudget"]['name'] : "0" }}
                                    </h4>
                                    <p class="mb-0 tx-12 text-white op-7">Compared to last week</p>
                                </div>
                                <span class="float-end my-auto ms-auto">
                                    <i class="fas fa-arrow-circle-{{ !empty($chartData["commonBudget"]['arrowValue']) ? $chartData["commonBudget"]['arrowValue'] : "" }} text-white" id="totalOfMostCommonBudgetArrow"></i>
                                    <span class="text-white op-7" id="totalOfMostCommonBudgetDiff">
                                        {{ !empty($chartData["commonBudget"]['percentage']) ? $chartData["commonBudget"]['percentage'] : "" }}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span id="" class="pt-1"></span>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
                <div class="card overflow-hidden sales-card bg-warning-gradient">
                    <div class="px-3 pt-3  pb-2 pt-0">
                        <div class="">
                            <h6 class="mb-3 tx-12 text-white">EMPLOYEES</h6>
                        </div>
                        <div class="pb-0 mt-0">
                            <div class="d-flex">
                                <div class="">
                                    <h4 class="tx-20 fw-bold mb-1 text-white" id="totalEmployeeCount">
                                        {{ !empty($chartData["employeeCount"]['totalCount']) ? $chartData["employeeCount"]['totalCount'] : "0" }}
                                    </h4>
                                    <p class="mb-0 tx-12 text-white op-7">Compared to last week</p>
                                </div>
                                <span class="float-end my-auto ms-auto">
                                    <i class="fas fa-arrow-circle-{{ !empty($chartData["employeeCount"]['arrowValue']) ? $chartData["employeeCount"]['arrowValue'] : "" }} text-white"
                                    id="totalEmployeeCountArrow"></i>
                                    <span class="text-white op-7"  id="totalEmployeeCountDiff">
                                        {{ !empty($chartData["employeeCount"]['percentage']) ? $chartData["employeeCount"]['percentage'] : "" }}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span id="" class="pt-1"></span>
                </div>
            </div>
        </div>
        <!-- row closed -->
        <div class="row row-sm">
            <div class="col-lg-12 col-xl-12">
                <div class="card card-dashboard-map-one">
                    <label class="main-content-label">LOCATIONS</label>
                    <span class="d-block mg-b-20 text-muted tx-12">Businesses around the globe.</span>
                    <div class="cl-71">
                        <div class="vmap-wrapper ht-180" id="countrymap" style="z-index: 0;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- row opened -->
        <div class="row row-sm">
            <div class="col-md-12 col-lg-12 col-xl-6">
                <div class="card">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">Top Pain Points Revenue</h4>
                            <a href="javascript:void(0);" class="tx-inverse invisible" data-bs-toggle="dropdown"><i
                                class="mdi mdi-dots-horizontal text-gray"></i></a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Another
                                    Action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Something Else
                                    Here</a>
                            </div>
                        </div>
                        <p class="tx-12 text-muted mb-0">Most common pain points with their revenue.</p>
                    </div>
                    <div class="card-body b-p-apex">
                        <div class="total-revenue">
                            <div>
                              <h4 id="revenueSum">${{ !empty($chartData["painPointBarChartData"]["revenue_sum"]) ? $chartData["painPointBarChartData"]["revenue_sum"] : "0" }}</h4>
                              <label><span class="bg-primary"></span>Total Revenue</label>
                            </div>
                            {{-- <div>
                              <h4 id="budgetSum">${{ !empty($chartData["painPointBarChartData"]["budget_sum"]) ? $chartData["painPointBarChartData"]["budget_sum"] : "0"}}</h4>
                              <label><span class="bg-danger"></span>Total Budget</label>
                            </div> --}}
                          </div>
                        <div id="topPainPoint" class="sales-bar mt-4"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-12 col-xl-6">
                <div class="card">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">Top Pain Points Budget</h4>
                            <a href="javascript:void(0);" class="tx-inverse invisible" data-bs-toggle="dropdown"><i
                                class="mdi mdi-dots-horizontal text-gray"></i></a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Another
                                    Action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Something Else
                                    Here</a>
                            </div>
                        </div>
                        <p class="tx-12 text-muted mb-0">Most common pain points with their budget.</p>
                    </div>
                    <div class="card-body b-p-apex">
                        <div class="total-revenue">
                            {{-- <div>
                              <h4 id="revenueSum">${{ !empty($chartData["painPointBarChartData"]["revenue_sum"]) ? $chartData["painPointBarChartData"]["revenue_sum"] : "0" }}</h4>
                              <label><span class="bg-primary"></span>Total Revenue</label>
                            </div> --}}
                            <div>
                              <h4 id="budgetSum">${{ !empty($chartData["painPointBarChartData"]["budget_sum"]) ? $chartData["painPointBarChartData"]["budget_sum"] : "0"}}</h4>
                              <label><span class="bg-danger"></span>Total Budget</label>
                            </div>
                          </div>
                        <div id="topPainPoint2" class="sales-bar mt-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- row closed -->
        <!-- row opened -->
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <input type="hidden" class="" id="selected_industry_business">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">INDUSTRY <span class="text-secondary"  id="industry-title"></span></h4>
                            <a href="javascript:void(0);" class="tx-inverse invisible" data-bs-toggle="dropdown"><i
                                class="mdi mdi-dots-horizontal text-gray"></i></a>
                            
                        </div>
                        
                    </div>
                    <div class="card-body">
                        {{-- <div class="chart-container" style="height: 375px; display: flex;justify-content: center; align-items: center;">
                            <h1 id="industryPieDataNotFound" style="color: #7c7c7c;font-size: 17px;"></h1>
                            <canvas id="industryPie" style=""></canvas>
                        </div> --}}
                        {{-- <div id="chartContainer" style="height: 400px; overflow-y: auto;">
                            <canvas id="industryPie" width="464" height="375"></canvas>
                        </div> --}}
                        <div id="chartContainer" style="height: 375px; overflow-y: auto;">
                            <canvas id="industryPie" width="464" height="375"></canvas>
                            <div id="legendContainer"></div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <input type="hidden" class="" id="selected_business_type">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">CATEGORY <span class="text-secondary"  id="business-type-title"></span></h4>
                            <a href="javascript:void(0);" class="tx-inverse invisible" data-bs-toggle="dropdown"><i class="mdi mdi-dots-horizontal text-gray"></i></a>
                        </div>
                        
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="height: 375px; overflow-y: auto;">
                            <h1 id="businessTypePieDataNotFound" style="color: #7c7c7c;font-size: 17px;"></h1>
                            {{-- <canvas id="businessTypePie" style=""></canvas> --}}
                            <canvas id="businessTypePie" width="464" height="375"></canvas>
                            <div id="legendContainer2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <input type="hidden" class="" id="selected_ownership_group">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">Ownership Group <span class="text-secondary" id="ownership-group-title"></span></h4>
                            <a href="javascript:void(0);" class="tx-inverse invisible" data-bs-toggle="dropdown"><i
                                class="mdi mdi-dots-horizontal text-gray"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="height: 375px; overflow-y: auto;">
                            <h1 id="ownershipGroupPieDataNotFound" style="color: #7c7c7c;font-size: 17px;"></h1>
                            <canvas id="ownershipGroupPie" width="464" height="375"></canvas>
                            <div id="legendContainer3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- row closed -->

        <!-- row opened -->
        <div class="row row-sm">
        <div class="col-xl-4 col-md-12 col-lg-6">
                <div class="card">
                    <div class="card-header pb-1">
                        <h3 class="card-title mb-2">Related pain points</h3>
                    </div>
                    <div class="product-timeline card-body pt-2 mt-1">
                        <h1 id="js-pain-point-count-no-data"  style="color: #7c7c7c;font-size: 17px;" class="no-data-dashboard"></h1>
                        <ul class="pain-point-dashboard mb-0" id="js-related-pain-point-user-count">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-12 col-lg-6">
                <div class="card">
                    <div class="card-header pb-1">
                        <h3 class="card-title mb-2">Related pain point businesses</h3>
                    </div>
                    <div class="product-timeline card-body pt-2 mt-1" >
                        <h1 id="js-pain-point-no-data"  style="color: #7c7c7c;font-size: 17px;" class="no-data-dashboard"></h1>
                        <ul class="pain-point-dashboard mb-0" id="js-related-pain-point">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-12 col-lg-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title mb-2">Recent Orders</h3>
                        {{-- <p class="tx-12 mb-0 text-muted">An order is an investor's instructions to a broker or brokerage firm to purchase or sell</p> --}}
                    </div>
                    <div class="card-body sales-info ot-0 pb-0 pt-0">
                        <div id="chart" class="ht-150"></div>
                        <div class="row sales-infomation pb-0 mb-0 mx-auto wd-100p">
                            <div class="col-md-6 col">
                                <p class="mb-0 d-flex"><span class="legend bg-primary brround"></span>Delivered</p>
                                <h3 class="mb-1" id="delivered-count"></h3>
                                <div class="d-flex">
                                    <p class="text-muted "></p>
                                </div>
                            </div>
                            <div class="col-md-6 col">
                                <p class="mb-0 d-flex"><span class="legend bg-info brround"></span>Cancelled</p>
                                    <h3 class="mb-1" id="cancelled-count"></h3>
                                <div class="d-flex">
                                    <p class="text-muted"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- row close -->
        <!-- row opened -->
        <div class="row row-sm row-deck">
            <div class="col-md-12 col-lg-6 col-xl-6">
                <div class="card card-dashboard-eight pb-2">
                    <h6 class="card-title">CURRENT LOCATIONS</h6>
                    <span class="d-block mg-b-10 text-muted tx-12 invisible">Sales performance revenue based by country</span>
                    <h1 id="topCountriesDataNotFound" style="color: #7c7c7c;font-size: 17px; display: flex; justify-content: center;align-items: center;"></h1>
                    <div class="list-group border" id="topCountries">
                        @foreach($topCountriesFormatted as $topCountrie)
                            <div class="list-group-item border-top-0" id="br-t-0">
                                <i class="flag-icon flag-icon-{{ strtolower($topCountrie['country_name']) }} flag-icon-squared"></i>
                                <p>{{ $topCountrie['country_name'] }}</p>
                                <span>{{ $topCountrie['total_country_count'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div> 
            <div class="col-md-12 col-lg-6 col-xl-6">
                <div class="card card-dashboard-eight pb-2">
                    <h6 class="card-title">FUTURE EXPANSION LOCATIONS</h6>
                    <span class="d-block mg-b-10 text-muted tx-12 invisible">Sales performance revenue based by country</span>
                    <h1 id="topCountriesFutureDataNotFound" style="color: #7c7c7c;font-size: 17px; display: flex;
                    justify-content: center; /* Centering Horizantly */
                    align-items: center;"></h1>
                    <div class="list-group border" id="topFutureCountries">
                        @foreach($topFutureCountriesFormatted as $topFutureCountrie)
                            <div class="list-group-item border-top-0" id="br-t-0">
                                <i class="flag-icon flag-icon-{{ strtolower($topFutureCountrie['country_name']) }} flag-icon-squared"></i>
                                <p>{{ $topFutureCountrie['country_name'] }}</p>
                                <span>{{ $topFutureCountrie['total_country_count'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!-- /row -->

        <div class="card ">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center pb-2">
                            <p class="mb-0">Potential Sales</p>
                        </div>
                        <h4 class="fw-bold mb-2" id="potential-sales-total"></h4>
                        <div class="progress progress-style progress-sm">
                            <div class="progress-bar bg-primary-gradient wd-100p" id="potential-sales-slide" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="20"></div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <div class="d-flex align-items-center pb-2">
                            <p class="mb-0">Closed Sales</p>
                        </div>
                        <h4 class="fw-bold mb-2" id="closed-sales-total"></h4>
                        <div class="progress progress-style progress-sm">
                            <div class="progress-bar bg-danger-gradient wd-75"  id="closed-sales-slide" role="progressbar"  aria-valuenow="45" aria-valuemin="0" aria-valuemax="45"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- row closed -->
    @push('scripts')
    <script>
        
        var chartData = {!! json_encode($chartData) !!};
        var mapdata = {!! json_encode(!empty($chartData["selectedStates"]) ? $chartData["selectedStates"] : null) !!};
        var industryLabels = {!! json_encode($industryUniqueLabels) !!};
        var industrydataCount = {!! json_encode($industryDataCount) !!};
        var ownershipLabels = {!! json_encode($ownershipUniqueLabels) !!};
        var ownershipdataCount = {!! json_encode($ownershipDataCount) !!};
        var businessTypeLabels = {!! json_encode($businessTypeUniqueLabels) !!};
        var businessTypedataCount = {!! json_encode($businessTypeDataCount) !!};
        const businessPainPointRoute = "{{Route('chart.get-pain-points-Businesses')}}";
    </script>
    <!-- Include Leaflet CSS and JavaScript files -->
    <script src="{{ asset('/js/backend/leaflet.js') }} "></script>
    <script src="{{ asset('/js/backend/leaflet.markercluster.js' ) }}"></script>
    <script src="{{ asset('/assets/js/chart.js') }}"></script>
    <!-- Initialize and configure the Leaflet map -->
    <script src="{{ asset('/js/backend/daterangepicker.min.js') }}"></script>
    <!-- Custom code -->
    <script src="{{ asset('/js/backend/chart-general-methods.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('/js/backend/chart-support.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('/js/backend/doughnut-filter-support.js') }}?v={{ time() }}"></script>
    @endpush
@endsection