@extends('layouts.app')

@section('title', 'Dashboard')

@section('page-specific-style')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="{{ asset('assets/css/leads.css') }}">
<style>
.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

.clickable {
    cursor: pointer;
}

.clickable.active {
    border: 2px solid #007bff; /* Highlight color */
    background-color: rgba(0, 123, 255, 0.1); /* Light background color */
}
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="dash-search">
        <form action="{{ url()->current() }}" method="GET" id="search-dashboard">
            <div class="row mt-0">
                <div class="col-4">
                    <div class="select-wrapper position-relative">
                        <select class="form-select" id="source-status" name="source" required>
                            <option value="all" {{ request('source') == 'all' ? 'selected' : '' }}>All</option>
                            @forelse ($sourceItems ?? [] as $key => $source)
                                <option value="{{ $source->value }}"
                                    {{ request('source') == $source->value ? 'selected' : '' }}>
                                    {{ $source->value }}
                                </option>
                            @empty
                                <option value="">No source found!</option>
                            @endforelse
                        </select>
                        <label for="source" class="flotting-label">Source</label>
                    </div>
                </div>

                <div class="col-4">
                    <div class="select-wrapper position-relative">
                        <select class="form-select" id="company" name="company_id" required>
                            <option value="all" {{ request('company_id') == 'all' ? 'selected' : '' }}>All</option>
                            @forelse ($companies ?? [] as $company)
                                <option value="{{ $company->id }}"
                                    {{ request('company_id') == $company->id ? 'selected' : '' }}>
                                    {{ $company->name }}
                                </option>
                            @empty
                                <option value="">No company found!</option>
                            @endforelse
                        </select>
                        <label for="company" class="flotting-label">Company</label>
                    </div>
                </div>

                <div class="col-4">
                    <div class="form-group">
                        <input type="text" class="form-control" id="date" placeholder="Date" autocomplete="off" autosuggest="off" value="{{ request()->date }}">
                    </div>
                </div>

                <input type="hidden" name="start_date" id="start_date" value="{{ request('start_date') }}">
                <input type="hidden" name="end_date" id="end_date" value="{{ request('end_date') }}">
            </div>
        </form>
    </div>

    <div class="section py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-box">
                    <h4 class="mb-sm-0 font-size-18 mt-4">Overview</h4>
                </div>
            </div>
        </div>
        <div class="row crm-Stat mb-3">
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable active" data-metric="spend">
                <span>Spend</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($totalSpend) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="revenue">
                <span>Revenue</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($totalRevenue) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="profit">
                <span>Profit</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($totalProfit) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="leads">
                <span>Leads</span>
                <h1>{{ formatNumberShort($totalLeadCount) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="conversions">
                <span>Conversions</span>
                <h1>{{ formatNumberShort($totalConversions) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="cpa">
                <span>CPA</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($dashboardCpa) }}</h1>
            </div>
            {{-- <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="totalPremium">
                <span>Monthly Premium</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($totalPremium) }}</h1>
            </div>
            <div class="col-md-2 col-sm-6 col-xxl-auto text-left p-3 clickable" data-metric="actualPremium">
                <span>Annualized Premium</span>
                <h1><span class="currency-symbol">$</span>{{ formatNumberShort($actualPremium) }}</h1>
            </div> --}}
        </div>


        <div class="row mt-2">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div id="spline_area" class="apex-charts" dir="ltr"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="section py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-box">
                    <h4 class="mb-sm-0 font-size-18">Account Insights</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 535px; overflow-y: auto; position: relative;">
                            <table class="table table-bordered">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th>Source</th>
                                        <th>Account Name</th>
                                        <th>Impressions</th>
                                        <th>Clicks</th>
                                        <th>CTR</th>
                                        <th>CPC</th>
                                        <th>Conversions</th>
                                        <th>Spend</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($accountInsights as $insight)
                                        <tr>
                                            <td>{{ strtoupper($insight->source ?? 'N/A') }}</td>
                                            <td>{{ $insight->account_name ?? 'N/A' }}</td>
                                            <td>{{ formatNumberShort($insight->impressions ?? 0) }}</td>
                                            <td>{{ formatNumberShort($insight->clicks ?? 0) }}</td>
                                            <td>{{ $insight->ctr ?? 0 }}</td>
                                            <td>{{ $insight->cpc ?? 0 }}</td>
                                            <td>{{ formatNumberShort($insight->conversions ?? 0) }}</td>
                                            <td><span>$</span>{{ number_format($insight->spend ?? 0, 2) }}</td>
                                            <td>
                                                {{ $insight->date_start ? \Carbon\Carbon::parse($insight->date_start)->format('j M Y') : 'N/A' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center">Data not found!</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot class="table-light" style="position: sticky; bottom: 0; z-index: 10; background: white;">
                                    <tr>
                                        <td>Total</td>
                                        <td></td>
                                        <td>{{ formatNumberShort($accountInsightsTotals->impressions ?? 0) }}</td>
                                        <td>{{ formatNumberShort($accountInsightsTotals->clicks ?? 0) }}</td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ formatNumberShort($accountInsightsTotals->conversions ?? 0) }}</td>
                                        <td><span>$</span>{{ number_format($accountInsightsTotals->spend ?? 0, 2) }}</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="text-end mt-2">
                            <a class="btn btn-link p-0 js-insights-link"
                               data-base-url="{{ route('insights.account.index') }}"
                               href="{{ route('insights.account.index', ['start_date' => request('start_date'), 'end_date' => request('end_date')]) }}">View all account insights</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-box">
                    <h4 class="mb-sm-0 font-size-18">Campaign Insights</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 535px; overflow-y: auto; position: relative;">
                            <table class="table table-bordered">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th>Source</th>
                                        <th>Campaign Name</th>
                                        <th>Impressions</th>
                                        <th>Clicks</th>
                                        <th>Spend</th>
                                        <th>Conversions</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($campaignInsights as $insight)
                                        <tr>
                                            <td>{{ strtoupper($insight->source ?? 'N/A') }}</td>
                                            <td>{{ $insight->campaign_name ?? 'N/A' }}</td>
                                            <td>{{ formatNumberShort($insight->impressions ?? 0) }}</td>
                                            <td>{{ formatNumberShort($insight->clicks ?? 0) }}</td>
                                            <td><span>$</span>{{ number_format($insight->spend ?? 0, 2) }}</td>
                                            <td>{{ formatNumberShort($insight->conversions ?? 0) }}</td>
                                            <td>
                                                {{ $insight->date_start ? \Carbon\Carbon::parse($insight->date_start)->format('j M Y') : 'N/A' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center">Data not found!</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot class="table-light" style="position: sticky; bottom: 0; z-index: 10; background: white;">
                                    <tr>
                                        <td>Total</td>
                                        <td></td>
                                        <td>{{ formatNumberShort($campaignInsightsTotals->impressions ?? 0) }}</td>
                                        <td>{{ formatNumberShort($campaignInsightsTotals->clicks ?? 0) }}</td>
                                        <td><span>$</span>{{ number_format($campaignInsightsTotals->spend ?? 0, 2) }}</td>
                                        <td>{{ formatNumberShort($campaignInsightsTotals->conversions ?? 0) }}</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="text-end mt-2">
                            <a class="btn btn-link p-0 js-insights-link"
                               data-base-url="{{ route('insights.campaign.index') }}"
                               href="{{ route('insights.campaign.index', ['start_date' => request('start_date'), 'end_date' => request('end_date')]) }}">View all campaign insights</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-box">
                    <h4 class="mb-sm-0 font-size-18">Ad Insights</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 535px; overflow-y: auto; position: relative;">
                            <table class="table table-bordered">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th>Source</th>
                                        <th>Name</th>
                                        <th>Impressions</th>
                                        <th>Clicks</th>
                                        <th>Spend</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($adInsights as $insight)
                                        <tr>
                                            <td>{{ strtoupper($insight->source ?? 'N/A') }}</td>
                                            <td>{{ $insight->name ?? 'N/A' }}</td>
                                            <td>{{ formatNumberShort($insight->impressions ?? 0) }}</td>
                                            <td>{{ formatNumberShort($insight->clicks ?? 0) }}</td>
                                            <td><span>$</span>{{ number_format($insight->spend ?? 0, 2) }}</td>
                                            <td>
                                                {{ $insight->date_start ? \Carbon\Carbon::parse($insight->date_start)->format('j M Y') : 'N/A' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Data not found!</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot class="table-light" style="position: sticky; bottom: 0; z-index: 10; background: white;">
                                    <tr>
                                        <td>Total</td>
                                        <td></td>
                                        <td>{{ formatNumberShort($adInsightsTotals->impressions ?? 0) }}</td>
                                        <td>{{ formatNumberShort($adInsightsTotals->clicks ?? 0) }}</td>
                                        <td><span>$</span>{{ number_format($adInsightsTotals->spend ?? 0, 2) }}</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="text-end mt-2">
                            <a class="btn btn-link p-0 js-insights-link"
                               data-base-url="{{ route('insights.ads.index') }}"
                               href="{{ route('insights.ads.index', ['start_date' => request('start_date'), 'end_date' => request('end_date')]) }}">View all ad insights</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-box">
                    <h4 class="mb-sm-0 font-size-18">Leads</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 535px; overflow-y: auto; position: relative;">
                            <table class="table table-bordered">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th>Source</th>
                                        <th>New</th>
                                        <th>Open</th>
                                        <th>Won</th>
                                        <th>Closed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($summary as $source => $counts)
                                        <tr>
                                            <td>{{ $source == '' || $source == null ? 'Null' : $source }}</td>
                                            <td>{{ $counts['new'] }}</td>
                                            <td>{{ $counts['open'] }}</td>
                                            <td>{{ $counts['won'] }}</td>
                                            <td>{{ $counts['closed'] }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">Data not found!</td>
                                        </tr>
                                    @endforelse

                                    @if(count($summary) > 0)
                                        @if (($totals['new'] - array_sum(array_column($summary, 'new'))) > 0 ||
                                            ($totals['open'] - array_sum(array_column($summary, 'open'))) > 0 ||
                                            ($totals['won'] - array_sum(array_column($summary, 'won'))) > 0 ||
                                            ($totals['closed'] - array_sum(array_column($summary, 'closed'))) > 0)
                                        <tr>
                                            <td>Null</td>
                                            <td>
                                                {!! $totals['new'] - array_sum(array_column($summary, 'new')) > 0 ?
                                                    $totals['new'] - array_sum(array_column($summary, 'new')) : 0 !!}
                                            </td>
                                            <td>{!! $totals['open'] - array_sum(array_column($summary, 'open')) > 0 ?
                                                $totals['open'] - array_sum(array_column($summary, 'open')) : 0 !!}</td>
                                            <td>{!! $totals['won'] - array_sum(array_column($summary, 'won')) > 0 ?
                                                $totals['won'] - array_sum(array_column($summary, 'won')) : 0 !!}</td>
                                            <td>{!! $totals['closed'] - array_sum(array_column($summary, 'closed')) > 0 ?
                                                $totals['closed'] - array_sum(array_column($summary, 'closed')) : 0 !!}</td>
                                        </tr>
                                        @endif
                                    @endif

                                </tbody>
                                @if(count($summary) > 0)
                                    <tfoot class="table-light" style="position: sticky; bottom: 0; z-index: 10; background: white;">
                                        <tr>
                                            <td>Total</td>
                                            <td>{{ $totals['new'] }}</td>
                                            <td>{{ $totals['open'] }}</td>
                                            <td>{{ $totals['won'] }}</td>
                                            <td>{{ $totals['closed'] }}</td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 535px; overflow-y: auto; position: relative;">
                            <table class="table table-bordered">
                                <thead class="table-light" style="position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th>Agent</th>
                                        <th>New</th>
                                        <th>Open</th>
                                        <th>Won</th>
                                        <th>Closed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $hasData = false; @endphp
                                    @forelse($assignedToUsers as $user)
                                        @php
                                            $new = $agentSummary[$user->id]['new'] ?? 0;
                                            $open = $agentSummary[$user->id]['open'] ?? 0;
                                            $won = $agentSummary[$user->id]['won'] ?? 0;
                                            $closed = $agentSummary[$user->id]['closed'] ?? 0;
                                        @endphp

                                        @if($new != 0 || $open != 0 || $won != 0 || $closed != 0)
                                            @php $hasData = true; @endphp
                                            <tr>
                                                <td>{{ $user->name }}</td>
                                                <td>{{ $new }}</td>
                                                <td>{{ $open }}</td>
                                                <td>{{ $won }}</td>
                                                <td>{{ $closed }}</td>
                                            </tr>
                                        @endif
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">No agents found</td>
                                        </tr>
                                    @endforelse

                                    @if ($hasData)
                                    @php
                                        $agentTotals = [
                                            'new' => array_sum(array_column($agentSummary, 'new')),
                                            'open' => array_sum(array_column($agentSummary, 'open')),
                                            'won' => array_sum(array_column($agentSummary, 'won')),
                                            'closed' => array_sum(array_column($agentSummary, 'closed'))
                                        ];
                                    @endphp

                                    @if (($totals['new'] - $agentTotals['new']) > 0 || ($totals['open'] - $agentTotals['open']) > 0 ||
                                        ($totals['won'] - $agentTotals['won']) > 0 || ($totals['closed'] - $agentTotals['closed']) > 0)

                                    <tr>
                                        <td>Null</td>
                                        <td>
                                            {{-- sum of new from the able and minus $$totalLeadCount --}}
                                            {!! $totals['new'] - $agentTotals['new'] > 0 ? $totals['new'] - $agentTotals['new'] : 0 !!}
                                        </td>
                                        <td>{!! $totals['open'] - $agentTotals['open'] > 0 ? $totals['open'] - $agentTotals['open'] : 0 !!}</td>
                                        <td>{!! $totals['won'] - $agentTotals['won'] > 0 ? $totals['won'] - $agentTotals['won'] : 0 !!}</td>
                                        <td>{!! $totals['closed'] - $agentTotals['closed'] > 0 ? $totals['closed'] - $agentTotals['closed'] : 0 !!}</td>
                                    </tr>
                                    @endif
                                    @endif

                                </tbody>

                                @if($hasData)
                                    <tfoot class="table-light" style="position: sticky; bottom: 0; z-index: 10; background: white;">
                                        <tr>
                                            <td>Total</td>
                                            <td>
                                                {{ $totals['new'] }}
                                            </td>
                                            <td>{{ $totals['open'] }}</td>
                                            <td>{{ $totals['won'] }}</td>
                                            <td>{{ $totals['closed'] }}</td>
                                        </tr>
                                    </tfoot>
                                @else
                                    <tr>
                                        <td colspan="5" class="text-center">No data found</td>
                                    </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('page-specific-script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@latest"></script>
<script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/js/dashboard/index.js') }}"></script>

<script>
    $(document).ready(function() {

        let chart;

        // Get URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const urlStartDate = urlParams.get('start_date');
        const urlEndDate = urlParams.get('end_date');

        // Initialize start and end dates
        let startDate, endDate;


        if (urlStartDate && urlEndDate && urlStartDate !== urlEndDate) {
            startDate = dayjs(urlStartDate, 'MM/DD/YYYY').format('YYYY-MM-DD');
            endDate = dayjs(urlEndDate, 'MM/DD/YYYY').format('YYYY-MM-DD');
        } else {
            endDate = dayjs().format('YYYY-MM-DD'); // Today's date
            startDate = dayjs().subtract(6, 'days').format('YYYY-MM-DD'); // 7 days ago
        }

        // Function to fetch chart data
        function fetchChartData(metric, startDate, endDate, type) {
            $.ajax({
                url: "{{ route('dashboard.chartData') }}",
                type: "GET",
                data: {
                    metric: metric,
                    start_date: startDate,
                    end_date: endDate,
                    type: type
                },
                success: function(data) {
                    updateChart(data, metric);

                    // Hide loader
                    $.LoadingOverlay("hide");
                },
                error: function() {
                    console.error("Failed to fetch chart data.");
                }
            });
        }

        function updateChart(data, metric) {
            if (chart) {
                chart.destroy();
            }

            chart = new ApexCharts(document.querySelector("#spline_area"), {
                chart: {
                    height: 350,
                    type: "area",
                    toolbar: { show: false }
                },
                dataLabels: { enabled: false },
                stroke: {
                    curve: "smooth",
                    width: 3
                },
                series: [{
                    name: "Data",
                    data: data.values
                }],
                xaxis: {
                    categories: formatCategories(data.dates),
                    title: {
                        text: metricName(metric),
                        style: {
                            fontSize: '14px',
                            fontWeight: 'bold',
                            color: '#333'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function (value) {
                            if (value >= 1000) {
                                return (value / 1000).toFixed(1) + "k"; // Format as "1.2k"
                            }
                            return value; // Keep the original value for numbers below 1000
                        },
                        style: {
                            fontSize: '12px',
                            colors: '#666'
                        }
                    }
                },
                grid: { borderColor: "#f1f1f1" },
                tooltip: { x: { format: "dd/MM/yy" } }
            });

            chart.render();
        }
function formatCategories(dates) {
    const formattedDates = [];
    const startDateModified = dayjs(dates[0]);
    const endDateModified = dayjs(dates[dates.length - 1]);
    const daysDiff = endDateModified.diff(startDateModified, 'days');

    if (daysDiff > 31) {
        let currentMonth = "";
        let monthStart = null;

        dates.forEach(date => {
            const dayjsDate = dayjs(date);
            const month = dayjsDate.format('MMM');

            if (month !== currentMonth) {
                // Start of a new month
                if (currentMonth && monthStart) {
                    formattedDates.push(`${currentMonth} ${monthStart}-${dayjsDate.subtract(1, 'day').format('D')}`);
                }
                currentMonth = month;
                monthStart = dayjsDate.format('D');
            }

            // If last date in range, push final entry
            if (date === dates[dates.length - 1]) {
                formattedDates.push(`${currentMonth} ${monthStart}-${dayjsDate.format('D')}`);
            }
        });
    } else {
        // If range is <= 31 days, display all dates normally with Month before day
        dates.forEach(date => {
            formattedDates.push(dayjs(date).format('MMM D'));
        });
    }

    return formattedDates;
}



        // Function to get the name of the metric
        function metricName(metric) {
            switch (metric) {
                case 'spend': return 'Spend';
                case 'revenue': return 'Revenue';
                case 'profit': return 'Profit';
                case 'leads': return 'Leads';
                case 'conversions': return 'Conversions';
                case 'cpa': return 'CPA';
                default: return '';
            }
        }


        // Check date range and fetch initial chart data
        const daysDiff = dayjs(endDate).diff(dayjs(startDate), 'day');
        const monthsDiff = dayjs(endDate).diff(dayjs(startDate), 'month');

        if (daysDiff > 20 && monthsDiff > 0) {
            fetchChartData("spend", startDate, endDate, "multiMonthData");
        } else {
            fetchChartData("spend", startDate, endDate, "dailyData");
        }


        // Click event for metric boxes
        $(document).on('click', '.clickable', function() {
            $('.crm-Stat .clickable').removeClass('active');
            $(this).addClass('active');

            var metric = $(this).data('metric');
            // fetchChartData(metric, startDate, endDate, "dailyData");

            // Show loader
            $.LoadingOverlay("show", {
                image: "",
                text: "Loading...",
                background: "rgba(0, 0, 0, 0.5)",
                textColor: "#fff",
                fontSize: "10px !important"
            });

            if (daysDiff > 20 && monthsDiff > 0) {
                fetchChartData(metric, startDate, endDate, "multiMonthData");
            } else {
                fetchChartData(metric, startDate, endDate, "dailyData");
            }
        });

        $('.js-insights-link').on('click', function () {
            const baseUrl = $(this).data('base-url');
            $(this).attr('href', baseUrl);
        });
    });
</script>



@endsection