@extends('layouts.app')

@section('title', 'Dashboard')

@php
    $sentimentSlices = $stats['sentiment'];
    $sentimentTotal = array_sum(array_column($sentimentSlices, 'total'));

    $categorySlices = array_values(array_filter($stats['categories'], fn($slice) => $slice['total'] > 0));
    $categoryTotal = array_sum(array_column($categorySlices, 'total'));

    $leadTotal = $stats['leads']['total'] ?? 0;
    $leadSlices = array_values(array_filter($stats['leads']['slices'] ?? [], fn($slice) => $slice['total'] > 0));

    $leadPriorities = $stats['leads']['priorities'] ?? [];
    $prioritySlices = array_values(array_filter($leadPriorities, fn($band) => $band['total'] > 0));
    $highBand = collect($leadPriorities)->firstWhere('key', \App\Models\LeadType::PRIORITY_HIGH);

    $canManage = (Auth::check() && Auth::user()->auth_id == 0) || Auth::user()->user_level != 0;

    $turnaround = $stats['turnaround'];
    $volumeSum = array_sum(array_column($stats['volume'], 'total'));

    $humaniseGap = function (?int $minutes) {
        if ($minutes === null) {
            return '—';
        }
        if ($minutes < 60) {
            return $minutes . ' min';
        }
        if ($minutes < 1440) {
            $hours = intdiv($minutes, 60);
            $rest = $minutes % 60;
            return $hours . ' h' . ($rest > 0 ? ' ' . $rest . ' m' : '');
        }
        $days = intdiv($minutes, 1440);
        $hours = intdiv($minutes % 1440, 60);
        return $days . ($days === 1 ? ' day' : ' days') . ($hours > 0 ? ' ' . $hours . ' h' : '');
    };

    $toChart = fn(array $rows) => array_map(
        fn($row) => [
            'label' => $row['label'],
            'colour' => $row['colour'],
            'total' => $row['total'],
            'url' => route('mails.filter', [$row['filter']]),
        ],
        $rows,
    );

    $sentimentChartData = $toChart($sentimentSlices);
    $priorityChartData = $toChart($prioritySlices);
    $leadChartData = $toChart($leadSlices);
    $categoryChartData = $toChart($categorySlices);

    $senderChartData = $stats['topSenders']
        ->map(fn($sender) => [
            'label' => $sender->sender_email,
            'colour' => '#3355d1',
            'total' => (int) $sender->total,
            'url' => null,
        ])
        ->values()
        ->all();

    $replyChartData = [
        [
            'label' => 'Replied',
            'colour' => '#067647',
            'total' => $stats['replied'],
            'url' => route('mails.filter', ['replied_mail']),
        ],
        [
            'label' => 'Awaiting',
            'colour' => '#b54708',
            'total' => $stats['awaiting'],
            'url' => route('mails.filter', ['send-mail']),
        ],
    ];

    $barHeight = fn(int $rows) => max(140, $rows * 32 + 30);
@endphp

@section('content')

    @if ($is_app_pwd == 0)
        <div class="alert alert-warning d-flex align-items-start gap-2" role="alert">
            <i class="bi bi-exclamation-triangle-fill mt-1"></i>
            <div>
                <strong>Mailbox not connected.</strong>
                We could not reach {{ Auth::user()->email }}. New mail will not arrive until the connection is
                restored — the figures below are the last data we were able to sync.
            </div>
        </div>
    @endif

    @unless ($canManage)
        <div class="alert alert-info d-flex align-items-start gap-2" role="alert">
            <i class="bi bi-info-circle-fill mt-1"></i>
            <div>You have read-only access. Contact your administrator or department head to make changes.</div>
        </div>
    @endunless

    <div class="emi-kpi-grid">
        <a class="emi-kpi emi-kpi--blue" href="{{ route('mails.filter', ['all']) }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-archive"></i></span>
                <span class="emi-kpi__label">Total mail</span>
            </div>
            <span class="emi-kpi__value">{{ number_format($stats['total']) }}</span>
            <span class="emi-kpi__foot">Conversations in this mailbox</span>
        </a>

        <a class="emi-kpi emi-kpi--violet" href="{{ route('mails.filter', ['unread']) }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-envelope-open"></i></span>
                <span class="emi-kpi__label">Unread</span>
            </div>
            <span class="emi-kpi__value">{{ number_format($stats['unread']) }}</span>
            <span class="emi-kpi__foot">
                @if ($stats['total'] > 0)
                    <strong>{{ round(($stats['unread'] / $stats['total']) * 100) }}%</strong> of all mail
                @else
                    Nothing received yet
                @endif
            </span>
        </a>

        <a class="emi-kpi emi-kpi--amber" href="{{ route('mails.filter', ['send-mail']) }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-reply"></i></span>
                <span class="emi-kpi__label">Awaiting reply</span>
            </div>
            <span class="emi-kpi__value">{{ number_format($stats['awaiting']) }}</span>
            <span class="emi-kpi__foot">Flagged as needing a response</span>
        </a>

        <a class="emi-kpi emi-kpi--red"
            href="{{ route('mails.filter', [$highBand['filter'] ?? \App\Models\LeadType::ALL_LEADS_SLUG]) }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-fire"></i></span>
                <span class="emi-kpi__label">High priority</span>
            </div>
            <span class="emi-kpi__value">{{ number_format($highBand['total'] ?? 0) }}</span>
            <span class="emi-kpi__foot">
                of <strong>{{ number_format($leadTotal) }}</strong> open leads
            </span>
        </a>

        <a class="emi-kpi emi-kpi--green" href="{{ route('mails.filter', ['replied_mail']) }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-check2-circle"></i></span>
                <span class="emi-kpi__label">Reply rate</span>
            </div>
            <span class="emi-kpi__value">
                {{ $stats['replyRate'] === null ? '—' : $stats['replyRate'] . '%' }}
            </span>
            <span class="emi-kpi__foot">
                @if ($stats['replyRate'] === null)
                    No mail has needed a reply yet
                @else
                    <strong>{{ number_format($stats['replied']) }}</strong> of
                    {{ number_format($stats['needingAction']) }} answered
                @endif
            </span>
        </a>
    </div>

    <div class="emi-grid emi-grid--2-1 emi-grid--top">

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Mail received</h2>
                <span class="emi-panel__hint">Last 30 days</span>
                <span class="emi-panel__link">{{ number_format($volumeSum) }} total</span>
            </div>
            <div class="emi-panel__body">
                @if ($volumeSum === 0)
                    <div class="emi-empty">
                        <i class="bi bi-graph-up"></i>
                        <h3>No mail in the last 30 days</h3>
                    </div>
                @else
                    <div class="emi-chart" style="height:300px;">
                        <canvas id="volumeChart" aria-label="Mail received per day over the last 30 days"
                            role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Sentiment</h2>
                <span class="emi-panel__hint">Click to open</span>
            </div>
            <div class="emi-panel__body">
                @if ($sentimentTotal === 0)
                    <div class="emi-empty">
                        <i class="bi bi-emoji-neutral"></i>
                        <h3>Nothing analysed yet</h3>
                    </div>
                @else
                    <div class="emi-chart emi-chart--clickable"
                        style="height:{{ $barHeight(count($sentimentChartData)) }}px;">
                        <canvas id="sentimentChart" aria-label="Sentiment breakdown of all mail" role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>
    </div>

    <div class="emi-grid emi-grid--2-1 emi-grid--top">

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Leads by type</h2>
                <a class="emi-panel__link"
                    href="{{ route('mails.filter', [\App\Models\LeadType::ALL_LEADS_SLUG]) }}">View all leads</a>
            </div>
            <div class="emi-panel__body">
                @if (count($leadChartData) === 0)
                    <div class="emi-empty">
                        <i class="bi bi-graph-up-arrow"></i>
                        <h3>No opportunities detected yet</h3>
                        <p>Adjust the confidence floor per type on the
                            <a href="{{ route('lead_types.index') }}">Lead Types</a> screen.</p>
                    </div>
                @else
                    <div class="emi-chart emi-chart--clickable"
                        style="height:{{ $barHeight(count($leadChartData)) }}px;">
                        <canvas id="leadTypeChart" aria-label="Open leads by type" role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Lead urgency</h2>
                <span class="emi-panel__hint">{{ number_format($leadTotal) }} open</span>
            </div>
            <div class="emi-panel__body">
                @if (count($priorityChartData) === 0)
                    <div class="emi-empty">
                        <i class="bi bi-speedometer2"></i>
                        <h3>Nothing to prioritise</h3>
                    </div>
                @else
                    <div class="emi-chart emi-chart--clickable" style="height:172px;">
                        <canvas id="priorityChart" aria-label="Open leads by urgency band" role="img"></canvas>
                    </div>
                    <ul class="emi-legend emi-legend--links">
                        @foreach ($leadPriorities as $band)
                            <li>
                                <a href="{{ route('mails.filter', [$band['filter']]) }}">
                                    <span class="emi-swatch" style="background:{{ $band['colour'] }}"></span>
                                    <span class="emi-legend__label">{{ $band['label'] }}</span>
                                    <span class="emi-legend__value">{{ number_format($band['total']) }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </section>
    </div>

    <div class="emi-grid emi-grid--2-1 emi-grid--top">

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Reply turnaround</h2>
                <span class="emi-panel__hint">How long answered mail waited</span>
                <a class="emi-panel__link" href="{{ route('mails.filter', ['replied_mail']) }}">View replied</a>
            </div>
            <div class="emi-panel__body">
                @if ($turnaround['total'] === 0)
                    <div class="emi-empty">
                        <i class="bi bi-stopwatch"></i>
                        <h3>No replies to measure yet</h3>
                    </div>
                @else
                    <p class="emi-panel__note">
                        Median <strong>{{ $humaniseGap($turnaround['medianMinutes']) }}</strong>
                        across <strong>{{ number_format($turnaround['total']) }}</strong>
                        answered {{ $turnaround['total'] === 1 ? 'mail' : 'mails' }}.
                    </p>
                    <div class="emi-chart" style="height:242px;">
                        <canvas id="turnaroundChart"
                            aria-label="Number of replies sent within each turnaround window" role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Reply status</h2>
                <span class="emi-panel__hint">Mail needing a response</span>
            </div>
            <div class="emi-panel__body">
                @if ($stats['needingAction'] === 0)
                    <div class="emi-empty">
                        <i class="bi bi-check2-circle"></i>
                        <h3>Nothing is waiting</h3>
                    </div>
                @else
                    <div class="emi-chart emi-chart--clickable" style="height:172px;">
                        <canvas id="replyChart" aria-label="Replied against awaiting a reply" role="img"></canvas>
                    </div>
                    <ul class="emi-legend emi-legend--links">
                        <li>
                            <a href="{{ route('mails.filter', ['replied_mail']) }}">
                                <span class="emi-swatch" style="background:#067647"></span>
                                <span class="emi-legend__label">Replied</span>
                                <span class="emi-legend__value">{{ number_format($stats['replied']) }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('mails.filter', ['send-mail']) }}">
                                <span class="emi-swatch" style="background:#b54708"></span>
                                <span class="emi-legend__label">Awaiting</span>
                                <span class="emi-legend__value">{{ number_format($stats['awaiting']) }}</span>
                            </a>
                        </li>
                    </ul>
                @endif
            </div>
        </section>
    </div>

    <div class="emi-grid emi-grid--1-1 emi-grid--top">

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Categories</h2>
                <span class="emi-panel__hint">{{ number_format($categoryTotal) }} classified</span>
            </div>
            <div class="emi-panel__body">
                @if (count($categoryChartData) === 0)
                    <div class="emi-empty">
                        <i class="bi bi-tags"></i>
                        <h3>Nothing categorised yet</h3>
                    </div>
                @else
                    <div class="emi-chart emi-chart--clickable"
                        style="height:{{ $barHeight(count($categoryChartData)) }}px;">
                        <canvas id="categoryChart" aria-label="Mail by category" role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>

        <section class="emi-panel">
            <div class="emi-panel__head">
                <h2 class="emi-panel__title">Top senders</h2>
                <span class="emi-panel__hint">Last 30 days</span>
            </div>
            <div class="emi-panel__body">
                @if (count($senderChartData) === 0)
                    <div class="emi-empty">
                        <i class="bi bi-person"></i>
                        <h3>No senders in the last 30 days</h3>
                    </div>
                @else
                    <div class="emi-chart" style="height:{{ $barHeight(count($senderChartData)) }}px;">
                        <canvas id="senderChart" aria-label="Busiest senders over the last 30 days"
                            role="img"></canvas>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
    <script>
        (function() {
            if (typeof Chart === 'undefined') return;

            Chart.defaults.font.family = "'Inter','Segoe UI',system-ui,sans-serif";
            Chart.defaults.font.size = 11;
            Chart.defaults.color = '#8a91a6';

            var TOOLTIP = {
                backgroundColor: '#101828',
                padding: 10,
                cornerRadius: 8
            };

            function navigate(rows) {
                return {
                    onClick: function(event, elements) {
                        if (!elements.length) return;
                        var row = rows[elements[0].index];
                        if (row && row.url && row.total > 0) window.location.href = row.url;
                    },
                    onHover: function(event, elements) {
                        var row = elements.length ? rows[elements[0].index] : null;
                        event.native.target.style.cursor = row && row.url && row.total > 0 ? 'pointer' : 'default';
                    }
                };
            }

            var FONT = "'Inter','Segoe UI',system-ui,sans-serif";

            function sum(values) {
                return values.reduce(function(a, b) {
                    return a + b;
                }, 0);
            }

            var sliceLabels = {
                id: 'sliceLabels',
                afterDatasetsDraw: function(chart) {
                    var data = chart.data.datasets[0].data;
                    var total = sum(data);
                    if (!total) return;

                    var ctx = chart.ctx;
                    ctx.save();
                    ctx.font = '600 11px ' + FONT;
                    ctx.fillStyle = '#fff';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    chart.getDatasetMeta(0).data.forEach(function(arc, i) {
                        if (!data[i] || data[i] / total < 0.09) return;
                        var point = arc.getCenterPoint();
                        ctx.fillText(data[i].toLocaleString(), point.x, point.y);
                    });
                    ctx.restore();
                }
            };

            function centreTotal(caption) {
                return {
                    id: 'centreTotal',
                    afterDraw: function(chart) {
                        var arcs = chart.getDatasetMeta(0).data;
                        if (!arcs.length) return;

                        var ctx = chart.ctx;
                        var x = arcs[0].x;
                        var y = arcs[0].y;
                        ctx.save();
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillStyle = '#101828';
                        ctx.font = '600 20px ' + FONT;
                        ctx.fillText(sum(chart.data.datasets[0].data).toLocaleString(), x, y - 7);
                        ctx.fillStyle = '#8a91a6';
                        ctx.font = '700 9px ' + FONT;
                        ctx.fillText(caption.toUpperCase(), x, y + 11);
                        ctx.restore();
                    }
                };
            }

            var barTopLabels = {
                id: 'barTopLabels',
                afterDatasetsDraw: function(chart) {
                    var data = chart.data.datasets[0].data;
                    var ctx = chart.ctx;
                    ctx.save();
                    ctx.font = '600 11px ' + FONT;
                    ctx.fillStyle = '#101828';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    chart.getDatasetMeta(0).data.forEach(function(bar, i) {
                        if (!data[i]) return;
                        ctx.fillText(data[i].toLocaleString(), bar.x, bar.y - 5);
                    });
                    ctx.restore();
                }
            };

            function doughnut(el, rows, caption) {
                var nav = navigate(rows);

                new Chart(el, {
                    type: 'doughnut',
                    data: {
                        labels: rows.map(function(r) {
                            return r.label;
                        }),
                        datasets: [{
                            data: rows.map(function(r) {
                                return r.total;
                            }),
                            backgroundColor: rows.map(function(r) {
                                return r.colour;
                            }),
                            borderColor: '#fff',
                            borderWidth: 2,
                            hoverOffset: 4,
                            hoverBorderColor: '#fff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '64%',
                        onClick: nav.onClick,
                        onHover: nav.onHover,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: Object.assign({}, TOOLTIP, {
                                callbacks: {
                                    label: function(c) {
                                        var total = c.dataset.data.reduce(function(a, b) {
                                            return a + b;
                                        }, 0);
                                        var pct = total ? Math.round(c.parsed / total * 100) : 0;
                                        return ' ' + c.label + ': ' + c.parsed.toLocaleString() + ' (' + pct + '%)';
                                    }
                                }
                            })
                        }
                    },
                    plugins: [sliceLabels, centreTotal(caption || 'total')]
                });
            }

            var valueLabels = {
                id: 'valueLabels',
                afterDatasetsDraw: function(chart) {
                    var ctx = chart.ctx;
                    ctx.save();
                    ctx.font = "600 11px 'Inter','Segoe UI',system-ui,sans-serif";
                    ctx.fillStyle = '#101828';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'middle';
                    chart.getDatasetMeta(0).data.forEach(function(bar, i) {
                        ctx.fillText(chart.data.datasets[0].data[i].toLocaleString(), bar.x + 7, bar.y);
                    });
                    ctx.restore();
                }
            };

            function hbar(el, rows) {
                var nav = navigate(rows);

                new Chart(el, {
                    type: 'bar',
                    data: {
                        labels: rows.map(function(r) {
                            return r.label;
                        }),
                        datasets: [{
                            data: rows.map(function(r) {
                                return r.total;
                            }),
                            backgroundColor: rows.map(function(r) {
                                return r.colour;
                            }),
                            borderRadius: 4,
                            borderSkipped: false,
                            barThickness: 11
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        layout: {
                            padding: {
                                right: 46,
                                top: 2,
                                bottom: 2
                            }
                        },
                        onClick: nav.onClick,
                        onHover: nav.onHover,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: Object.assign({}, TOOLTIP, {
                                displayColors: false,
                                callbacks: {
                                    label: function(c) {
                                        return c.parsed.x.toLocaleString() +
                                            (c.parsed.x === 1 ? ' mail' : ' mails');
                                    }
                                }
                            })
                        },
                        scales: {
                            x: {
                                display: false,
                                beginAtZero: true,
                                grace: '4%'
                            },
                            y: {
                                grid: {
                                    display: false
                                },
                                border: {
                                    display: false
                                },
                                ticks: {
                                    color: '#475467',
                                    font: {
                                        size: 12
                                    },
                                    crossAlign: 'far',
                                    callback: function(value) {
                                        var label = this.getLabelForValue(value);
                                        return label.length > 26 ? label.slice(0, 25) + '…' : label;
                                    }
                                }
                            }
                        }
                    },
                    plugins: [valueLabels]
                });
            }

            var volumeEl = document.getElementById('volumeChart');
            if (volumeEl) {
                var volume = @json($stats['volume']);
                var ctx = volumeEl.getContext('2d');
                var fill = ctx.createLinearGradient(0, 0, 0, 280);
                fill.addColorStop(0, 'rgba(51,85,209,.20)');
                fill.addColorStop(1, 'rgba(51,85,209,0)');

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: volume.map(function(d) {
                            return d.label;
                        }),
                        datasets: [{
                            label: 'Mail received',
                            data: volume.map(function(d) {
                                return d.total;
                            }),
                            borderColor: '#3355d1',
                            backgroundColor: fill,
                            borderWidth: 2,
                            fill: true,
                            tension: .3,
                            pointRadius: 0,
                            pointHoverRadius: 4,
                            pointHoverBackgroundColor: '#3355d1',
                            pointHoverBorderColor: '#fff',
                            pointHoverBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: Object.assign({}, TOOLTIP, {
                                displayColors: false,
                                callbacks: {
                                    label: function(c) {
                                        return c.parsed.y + (c.parsed.y === 1 ? ' mail' : ' mails');
                                    }
                                }
                            })
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                },
                                border: {
                                    color: '#e4e7ec'
                                },
                                ticks: {
                                    maxRotation: 0,
                                    autoSkip: true,
                                    maxTicksLimit: 8
                                }
                            },
                            y: {
                                beginAtZero: true,
                                border: {
                                    display: false
                                },
                                grid: {
                                    color: '#f0f1f5'
                                },
                                ticks: {
                                    precision: 0,
                                    maxTicksLimit: 5
                                }
                            }
                        }
                    }
                });
            }

            var turnaroundEl = document.getElementById('turnaroundChart');
            if (turnaroundEl) {
                var turnaround = @json($turnaround['buckets'] ?? []);

                new Chart(turnaroundEl, {
                    type: 'bar',
                    data: {
                        labels: turnaround.map(function(b) {
                            return b.label;
                        }),
                        datasets: [{
                            label: 'Replies',
                            data: turnaround.map(function(b) {
                                return b.total;
                            }),
                            backgroundColor: ['#067647', '#3f9a53', '#c99a1e', '#dc6803', '#c4531a', '#b42318'],
                            borderRadius: 5,
                            maxBarThickness: 54
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        layout: {
                            padding: {
                                top: 18
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: Object.assign({}, TOOLTIP, {
                                displayColors: false,
                                callbacks: {
                                    label: function(c) {
                                        var total = c.dataset.data.reduce(function(a, b) {
                                            return a + b;
                                        }, 0);
                                        var pct = total ? Math.round(c.parsed.y / total * 100) : 0;
                                        return c.parsed.y + (c.parsed.y === 1 ? ' reply' : ' replies') +
                                            ' (' + pct + '%)';
                                    }
                                }
                            })
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                },
                                border: {
                                    color: '#e4e7ec'
                                },
                                ticks: {
                                    maxRotation: 0,
                                    autoSkip: false
                                }
                            },
                            y: {
                                beginAtZero: true,
                                border: {
                                    display: false
                                },
                                grid: {
                                    color: '#f0f1f5'
                                },
                                ticks: {
                                    precision: 0,
                                    maxTicksLimit: 5
                                }
                            }
                        }
                    },
                    plugins: [barTopLabels]
                });
            }

            var charts = [
                ['priorityChart', @json($priorityChartData), doughnut, 'leads'],
                ['replyChart', @json($replyChartData), doughnut, 'to answer'],
                ['sentimentChart', @json($sentimentChartData), hbar],
                ['leadTypeChart', @json($leadChartData), hbar],
                ['categoryChart', @json($categoryChartData), hbar],
                ['senderChart', @json($senderChartData), hbar]
            ];

            charts.forEach(function(entry) {
                var el = document.getElementById(entry[0]);
                if (el) entry[2](el, entry[1], entry[3]);
            });
        })();
    </script>
@endpush