@extends('crm.layouts.master')
@section('title','CRM Dashboard')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('paces/assets/plugins/jsvectormap/jsvectormap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@php
    $welcomeName   = explode(' ', trim(Auth::user()->name ?? 'there'))[0];
    $isManager     = in_array(Auth::user()->access_level, ['Admin', 'Office Manager']);
    $depositSeries = json_decode($deposit_amount, true) ?: [];
    $depositCountSeries = json_decode($deposit_count, true) ?: [];
    $statusLabels  = json_decode($lead_status, true) ?: [];
    $statusCounts  = json_decode($status_count, true) ?: [];
    $qualifiedCount = 0;
    foreach ($statusLabels as $i => $label) {
        if ($label === 'FTD') {
            $qualifiedCount += (int) ($statusCounts[$i] ?? 0);
        }
    }
    $qualifiedPct  = $leads > 0 ? min(100, (int) round(($qualifiedCount / max(1, $leads)) * 100)) : 0;
    $dealsClosed   = array_sum($depositCountSeries);
    $totalRevenue  = $tradingStats['total_revenue'] ?? 0;
    $statusColors = \App\Support\LeadStatusRegistry::badgeClasses();
@endphp

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

    {{-- Page title --}}
    <div class="page-title-head d-flex align-items-center">
        <div class="flex-grow-1">
            <h4 class="page-main-title m-0">CRM</h4>
        </div>
        <div class="text-end">
            <ol class="breadcrumb m-0 py-0">
                <li class="breadcrumb-item"><a href="{{ route('crm.dashboard') }}">Dashboards</a></li>
                <li class="breadcrumb-item active">CRM</li>
            </ol>
        </div>
    </div>

    {{-- ═══════════ Row 1: Welcome + 4 KPI cards ═══════════ --}}
    <div class="row">
        {{-- Welcome card --}}
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between gap-2">
                        <div>
                            <p class="text-muted mb-1">Good Day,</p>
                            <h4 class="fw-bold mb-0">{{ $welcomeName }}!</h4>
                            <p class="text-muted mt-1 mb-0 fs-sm">{{ now()->format('l, M j Y') }}</p>
                        </div>
                        <img src="{{ asset('paces/assets/images/svg/email-campaign.svg') }}" alt="" style="height:72px" class="d-none d-sm-block">
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center py-2 px-3">
                    <span class="d-flex align-items-center gap-1 text-muted fs-sm">
                        <i class="ti ti-clock"></i>
                        <span id="clock-widget">{{ now()->format('g:i A') }}</span>
                    </span>
                    @if($isManager && !empty($tradingStats))
                    <a href="{{ route('crm.tickets') }}" class="badge badge-soft-warning fs-xs">
                        {{ $tradingStats['open_tickets'] ?? 0 }} Open Tickets
                    </a>
                    @endif
                </div>
            </div>
        </div>

        {{-- Leads Generated --}}
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-7">
                            <h5 class="text-muted fs-sm text-uppercase text-truncate mb-0">Leads Generated</h5>
                            <div class="d-flex align-items-center gap-2 my-2">
                                <div class="avatar-md flex-shrink-0">
                                    <span class="avatar-title text-bg-light rounded-circle fs-22">
                                        <i class="ti ti-users"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold" data-target="{{ $leads }}">0</h3>
                            </div>
                            <p class="mb-0 text-muted fs-sm">
                                @if($isManager)
                                    <a href="{{ route('trading.trades') }}" class="text-muted">${{ number_format($tradingStats['client_assets'] ?? 0, 0) }} client assets</a>
                                @else
                                    All assigned leads
                                @endif
                            </p>
                        </div>
                        <div class="col-5">
                            <div id="leads-generated-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Qualified Leads --}}
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-7">
                            <h5 class="text-muted fs-sm text-uppercase text-truncate mb-0">Qualified Leads</h5>
                            <div class="d-flex align-items-center gap-2 my-2">
                                <div class="avatar-md flex-shrink-0">
                                    <span class="avatar-title text-bg-light rounded-circle fs-22">
                                        <i class="ti ti-user-check"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold" data-target="{{ $qualifiedCount }}">0</h3>
                            </div>
                            <p class="mb-0 text-muted fs-sm">
                                <span class="{{ $qualifiedPct > 0 ? 'text-success' : 'text-muted' }} me-1">{{ $qualifiedPct }}%
                                    <i class="ti ti-trending-{{ $qualifiedPct > 0 ? 'up' : 'down' }} ms-1"></i>
                                </span>
                                of pipeline
                            </p>
                        </div>
                        <div class="col-5 d-flex justify-content-end">
                            <div id="qualified-leads-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Revenue Generated --}}
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-7">
                            <h5 class="text-muted fs-sm text-uppercase text-truncate mb-0">Total Revenue</h5>
                            <div class="d-flex align-items-center gap-2 my-2">
                                <div class="avatar-md flex-shrink-0">
                                    <span class="avatar-title text-bg-light rounded-circle fs-22">
                                        <i class="ti ti-currency-dollar"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">$<span data-target="{{ number_format($totalRevenue, 0) }}">0</span></h3>
                            </div>
                            <p class="mb-0 text-muted fs-sm">
                                @if($isManager)
                                    <span class="text-info">{{ $tradingStats['active_clients'] ?? 0 }} active clients</span>
                                @else
                                    Deposits approved
                                @endif
                            </p>
                        </div>
                        <div class="col-5">
                            <div id="revenue-generated-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end row 1 --}}

    {{-- ═══════════ Row 2: Overview + Lead Source ═══════════ --}}
    <div class="row">
        <div class="col-xl-8">
            <div class="card card-h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Overview <span class="text-muted fw-normal fs-base">(Last 30 Days)</span></h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-4">
                            <div class="row g-3">
                                <div class="col-6">
                                    <p class="text-muted mb-1">Revenue</p>
                                    <h4 class="mb-2">
                                        <i class="ti ti-cash text-success me-1"></i>
                                        $<span data-target="{{ number_format($totalRevenue, 0) }}">0</span>
                                    </h4>
                                    <span class="badge fs-12 badge-soft-success"><i class="ti ti-history"></i> All time</span>
                                </div>
                                <div class="col-6">
                                    <p class="text-muted mb-1">Active Clients</p>
                                    <h4 class="mb-2">
                                        <i class="ti ti-users-group text-primary me-1"></i>
                                        <span data-target="{{ $tradingStats['active_clients'] ?? 0 }}">0</span>
                                    </h4>
                                    <span class="badge fs-12 badge-soft-primary"><i class="ti ti-chart-line"></i> Portal</span>
                                </div>
                                <div class="col-6">
                                    <p class="text-muted mt-2 mb-1">Client Assets</p>
                                    <h4 class="mb-2">
                                        <i class="ti ti-building-bank text-warning me-1"></i>
                                        $<span data-target="{{ number_format($tradingStats['client_assets'] ?? 0, 0) }}">0</span>
                                    </h4>
                                    <span class="badge fs-12 badge-soft-warning"><i class="ti ti-chart-pie"></i> Cash + positions</span>
                                </div>
                                <div class="col-6">
                                    <p class="text-muted mt-2 mb-1">KYC Pending</p>
                                    <h4 class="mb-2">
                                        <i class="ti ti-id-badge text-info me-1"></i>
                                        <span data-target="{{ $tradingStats['pending_kyc'] ?? 0 }}">0</span>
                                    </h4>
                                    <span class="badge fs-12 badge-soft-info"><i class="ti ti-calendar"></i> Review</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8">
                            <div dir="ltr">
                                <div id="dash-revenue-chart" class="apex-charts"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card card-h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Lead Source</h4>
                </div>
                <div class="card-body">
                    @if(count($statusLabels))
                        <div id="most-leads-chart" class="apex-charts"></div>
                        <div class="mt-2">
                            @foreach($statusLabels as $i => $label)
                            <div class="d-flex justify-content-between align-items-center p-1 border-bottom">
                                <span class="fw-semibold fs-sm">{{ $label }}</span>
                                <span class="fw-semibold text-muted fs-sm">{{ $statusCounts[$i] ?? 0 }}</span>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted mb-0">No lead status data yet.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{-- end row 2 --}}

    {{-- ═══════════ Row 3: Deal Status / Recent Leads ═══════════ --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h4 class="card-title mb-0">Deal Status</h4>
                    <a href="{{ route('clients') }}" class="btn btn-sm btn-primary"><i class="ti ti-list me-1"></i> View All Clients</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-custom table-nowrap table-centered table-hover mb-0 w-100" id="deafult_ordering_table">
                        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                            <tr class="text-uppercase fs-xxs">
                                <th>Lead</th>
                                <th>Email</th>
                                <th>Country</th>
                                <th>Agent</th>
                                <th>Pipeline</th>
                                <th>Registered</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($recentLeads as $lead)
                            @php
                                $statusClass = $statusColors[$lead->status ?? 'New'] ?? 'text-bg-light';
                                $initial = strtoupper(substr($lead->fname ?? '?', 0, 1));
                                $bgMap = ['A'=>'primary','B'=>'success','C'=>'info','D'=>'warning','E'=>'danger','F'=>'secondary'];
                                $bg = $bgMap[$initial] ?? 'primary';
                                $pipelineStatuses = ['Need to call','In Call','Straight to voicemail','No answer','Call back','FTD'];
                                $currentStep = array_search($lead->status ?? 'Need to call', $pipelineStatuses);
                                if ($currentStep === false) $currentStep = 0;
                                $totalSteps = count($pipelineStatuses);
                            @endphp
                            <tr>
                                <td>
                                    <div class="avatar-xs d-inline-block me-1">
                                        <span class="avatar-title bg-{{ $bg }}-subtle text-{{ $bg }} fw-bold rounded-circle">{{ $initial }}</span>
                                    </div>
                                    <a href="{{ route('lead_detail', $lead->id) }}" class="text-reset fw-medium">{{ $lead->fname }} {{ $lead->lname }}</a>
                                </td>
                                <td class="text-muted fs-sm">{{ $lead->email }}</td>
                                <td>{{ $lead->country ?? '—' }}</td>
                                <td>{{ $lead->user->name ?? '—' }}</td>
                                <td style="min-width:120px">
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-success" role="progressbar"
                                            style="width: {{ $totalSteps > 0 ? round((($currentStep + 1) / $totalSteps) * 100) : 0 }}%"></div>
                                    </div>
                                </td>
                                <td class="text-muted fs-sm">{{ $lead->create_date }}</td>
                                <td><span class="badge p-1 {{ $statusClass }}">{{ $lead->status ?? 'New' }}</span></td>
                                <td>
                                    <a href="{{ route('lead_detail', $lead->id) }}" class="text-muted fs-20"><i class="ti ti-edit"></i></a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {{-- end row 3 --}}

    {{-- ═══════════ Row 4: Map + Activity + Agent (manager only) ═══════════ --}}
    @if($isManager)
    <div class="row">
        {{-- Location By Session --}}
        <div class="col-xl-4">
            <div class="card card-h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Location By Session</h4>
                    <div class="dropdown">
                        <a href="#" class="btn btn-sm btn-light btn-icon" data-bs-toggle="dropdown">
                            <i class="ti ti-dots-vertical fs-lg"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="ti ti-world me-2"></i> Top Countries</a></li>
                            <li><a class="dropdown-item" href="#"><i class="ti ti-download me-2"></i> Download Report</a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div id="session-by-countries" style="height:203px"></div>
                    <div class="mt-3">
                        <div id="countryLegend"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="col-xl-4">
            <div class="card card-h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Recent Activity</h4>
                    <div class="dropdown">
                        <a href="#" class="btn btn-sm btn-light btn-icon" data-bs-toggle="dropdown">
                            <i class="ti ti-dots-vertical fs-lg"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="ti ti-list me-2"></i> View Activity Log</a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        @forelse($recentActivity as $activity)
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <div class="avatar-sm">
                                    <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                        <i class="ti ti-activity fs-14"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="timeline-content ps-3 pb-3">
                                <p class="mb-1 fw-semibold fs-sm">{{ Str::limit($activity->description, 60) }}</p>
                                <p class="text-muted mb-0" style="font-size:.72rem">
                                    By {{ $activity->user->name ?? 'System' }}
                                    &bull; {{ $activity->created_at ? \Carbon\Carbon::parse($activity->created_at)->diffForHumans() : '' }}
                                </p>
                            </div>
                        </div>
                        @empty
                        <p class="text-muted">No recent activity.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        {{-- Agent Performance --}}
        <div class="col-xl-4">
            <div class="card card-h-100">
                <div class="card-header">
                    <h4 class="card-title mb-0">Agent Performance</h4>
                </div>
                <div class="card-body">
                    <div id="agentChart" class="apex-charts"></div>
                </div>
            </div>
        </div>
    </div>
    {{-- end row 4 --}}

    {{-- ═══════════ Row 5: Lead Funnel + Lead Lists table ═══════════ --}}
    <div class="row">
        <div class="col-xl-5">
            <div class="card card-h-100">
                <div class="card-header">
                    <h4 class="card-title mb-0">Lead Status Funnel</h4>
                </div>
                <div class="card-body">
                    @if(count($statusLabels))
                        <div id="funnelChart" class="apex-charts"></div>
                    @else
                        <p class="text-muted mb-0">No funnel data yet.</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-xl-7">
            <div class="card card-h-100">
                <div class="card-header">
                    <h4 class="card-title mb-0">Lead Lists</h4>
                </div>
                <div class="table-responsive">
                    <table class="table table-custom table-nowrap table-centered table-hover mb-0 w-100" id="leadListsTable">
                        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                            <tr class="text-uppercase fs-xxs">
                                <th>#</th><th>List Name</th><th>Office</th><th>Total</th>
                                <th>Need to Call</th><th>Call Back</th><th>FTD</th><th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($leadLists as $list)
                        <tr>
                            <td>{{ $list->id }}</td>
                            <td class="fw-medium">{{ $list->list_name }}</td>
                            <td class="text-muted fs-sm">{{ $list->office_names }}</td>
                            <td><span class="badge text-bg-light">{{ $list->total }}</span></td>
                            <td>{{ $list->need_to_call_count }}</td>
                            <td>{{ $list->call_back_count }}</td>
                            <td><span class="badge badge-soft-success">{{ $list->ftd_count }}</span></td>
                            <td class="text-muted fs-sm">{{ date('d M Y', strtotime($list->create_date)) }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
    {{-- end manager-only rows --}}

</div>
{{-- end container-fluid --}}
@endsection

@section('page-js')
    <script src="{{ asset('paces/assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('paces/assets/plugins/jsvectormap/jsvectormap.min.js') }}"></script>
    <script src="{{ asset('paces/assets/plugins/jsvectormap/world.js') }}"></script>
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script>
    (function () {
        /* Live clock */
        var clock = document.getElementById('clock-widget');
        if (clock) {
            var tick = function () { clock.innerText = (new Date).toLocaleTimeString(); };
            tick();
            var ti = setInterval(tick, 1000);
            window.addEventListener('beforeunload', function () { clearInterval(ti); });
        }

        var depositAmount = {!! $deposit_amount ?: '[]' !!};
        var depositCount  = {!! $deposit_count  ?: '[]' !!};
        var labelsDate    = {!! $labels_date     ?: '[]' !!};
        var statusLabels  = {!! $lead_status     ?: '[]' !!};
        var statusCounts  = {!! $status_count    ?: '[]' !!};
        var sparkFallback = [5, 10, 8, 14, 12, 18, 16, 22, 20, 26, 24];

        if (typeof CustomApexChart === 'undefined') return;

        /* Clients sparkline */
        new CustomApexChart({
            selector: '#leads-generated-chart',
            options: function () {
                return {
                    chart: { type: 'area', height: 55, sparkline: { enabled: true } },
                    series: [{ name: 'Clients', data: depositCount.length ? depositCount : sparkFallback }],
                    stroke: { width: 2, curve: 'smooth' },
                    markers: { size: 0 },
                    colors: [theme('chart-primary')],
                    fill: { opacity: [1], type: ['gradient'], gradient: { type: 'vertical', inverseColors: false, opacityFrom: .5, opacityTo: 0, stops: [0, 100] } },
                    tooltip: { fixed: { enabled: false }, x: { show: false }, y: { title: { formatter: function () { return 'Clients'; } } }, marker: { show: false } }
                };
            }
        });

        /* Qualified radial */
        new CustomApexChart({
            selector: '#qualified-leads-chart',
            options: function () {
                return {
                    series: [{{ $qualifiedPct }}],
                    chart: { type: 'radialBar', height: 72, width: 72 },
                    stroke: { lineCap: 'round' },
                    plotOptions: { radialBar: { hollow: { size: '45%' }, dataLabels: { show: false } } },
                    grid: { padding: { top: -20, bottom: -20, left: -20, right: -20 } },
                    labels: ['Qualified'],
                    colors: [theme('chart-primary')]
                };
            }
        });

        /* Revenue bar sparkline */
        new CustomApexChart({
            selector: '#revenue-generated-chart',
            options: function () {
                return {
                    chart: { type: 'bar', height: 55, sparkline: { enabled: true } },
                    plotOptions: { bar: { horizontal: false, columnWidth: '60%', borderRadius: 3 } },
                    colors: [theme('chart-primary')],
                    series: [{ name: 'Revenue', data: depositAmount.length ? depositAmount : sparkFallback }],
                    xaxis: { crosshairs: { width: 1 } },
                    tooltip: { fixed: { enabled: false }, x: { show: false }, y: { formatter: function (v) { return '$' + v; }, title: { formatter: function () { return 'Revenue'; } } }, marker: { show: false } }
                };
            }
        });

        /* Overview area+line chart */
        if (document.getElementById('dash-revenue-chart')) {
            new CustomApexChart({
                selector: '#dash-revenue-chart',
                options: function () {
                    return {
                        series: [
                            { name: 'Deposit amount', type: 'area', data: depositAmount.length ? depositAmount : sparkFallback },
                            { name: 'Deposit count',  type: 'line', data: depositCount.length  ? depositCount  : sparkFallback }
                        ],
                        chart: { type: 'line', height: 295, toolbar: { show: false } },
                        stroke: { width: [2, 2], curve: 'smooth', dashArray: [0, 4] },
                        colors: [theme('chart-delta'), theme('chart-secondary')],
                        grid: { strokeDashArray: 1 },
                        zoom: { enabled: false },
                        xaxis: { categories: labelsDate.length ? labelsDate : ['—'], axisBorder: { show: false }, labels: { offsetY: 1 } },
                        yaxis: { labels: { offsetX: -10 }, axisBorder: { show: false } },
                        legend: { show: true },
                        dataLabels: { enabled: false },
                        markers: { size: 0 },
                        fill: { opacity: [1, 1], type: ['gradient', 'solid'], gradient: { type: 'vertical', inverseColors: false, opacityFrom: .5, opacityTo: 0, stops: [0, 70] } }
                    };
                }
            });
        }

        /* Lead Source donut */
        if (document.getElementById('most-leads-chart') && statusLabels.length) {
            new CustomApexChart({
                selector: '#most-leads-chart',
                options: function () {
                    return {
                        chart: { height: 220, type: 'donut' },
                        legend: { show: false },
                        stroke: { width: 0 },
                        plotOptions: { pie: { donut: { size: '70%', labels: { show: true, total: { showAlways: true, show: true } } } } },
                        series: statusCounts,
                        labels: statusLabels,
                        colors: [theme('chart-primary'), theme('chart-secondary'), theme('chart-alpha'), theme('chart-gray'), theme('chart-delta'), theme('chart-beta')],
                        dataLabels: { enabled: false }
                    };
                }
            });
        }

        @if($isManager)
        /* Funnel chart */
        if (document.getElementById('funnelChart') && statusLabels.length) {
            var combined = statusLabels.map(function (label, i) { return { label: label, count: statusCounts[i] }; });
            combined.sort(function (a, b) { return b.count - a.count; });
            new CustomApexChart({
                selector: '#funnelChart',
                options: function () {
                    return {
                        series: [{ name: 'Clients', data: combined.map(function (x) { return x.count; }) }],
                        chart: { type: 'bar', height: 280, toolbar: { show: false } },
                        plotOptions: { bar: { borderRadius: 4, horizontal: true, distributed: true, isFunnel: true } },
                        dataLabels: { enabled: true, formatter: function (val, opt) { return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val; } },
                        xaxis: { categories: combined.map(function (x) { return x.label; }) },
                        legend: { show: false },
                        colors: [theme('chart-primary'), theme('chart-secondary'), theme('chart-alpha'), theme('chart-gray')]
                    };
                }
            });
        }

        /* Agent performance */
        var agentData = {!! $agentPerformance !!};
        if (document.getElementById('agentChart') && agentData.length) {
            new CustomApexChart({
                selector: '#agentChart',
                options: function () {
                    return {
                        chart: { type: 'bar', height: 280, toolbar: { show: false } },
                        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                        series: [{ name: 'Deposits', data: agentData.map(function (a) { return a.deposit_count; }) }],
                        xaxis: { categories: agentData.map(function (a) { return a.name; }) },
                        colors: [theme('chart-primary')],
                        dataLabels: { enabled: false }
                    };
                }
            });
        }

        /* World map */
        (function () {
            var topCountries = {!! $topCountries !!};
            var nameToIso = {
                'Afghanistan':'AF','Albania':'AL','Algeria':'DZ','Angola':'AO','Argentina':'AR','Armenia':'AM',
                'Australia':'AU','Austria':'AT','Azerbaijan':'AZ','Bahrain':'BH','Bangladesh':'BD','Belarus':'BY',
                'Belgium':'BE','Bolivia':'BO','Brazil':'BR','Bulgaria':'BG','Cambodia':'KH','Canada':'CA',
                'Chile':'CL','China':'CN','Colombia':'CO','Croatia':'HR','Cyprus':'CY','Czech Republic':'CZ',
                'Czechia':'CZ','Denmark':'DK','Ecuador':'EC','Egypt':'EG','Estonia':'EE','Ethiopia':'ET',
                'Finland':'FI','France':'FR','Georgia':'GE','Germany':'DE','Ghana':'GH','Greece':'GR',
                'Guatemala':'GT','Honduras':'HN','Hungary':'HU','Iceland':'IS','India':'IN','Indonesia':'ID',
                'Iran':'IR','Iraq':'IQ','Ireland':'IE','Israel':'IL','Italy':'IT','Japan':'JP','Jordan':'JO',
                'Kazakhstan':'KZ','Kenya':'KE','Kuwait':'KW','Latvia':'LV','Lebanon':'LB','Libya':'LY',
                'Lithuania':'LT','Luxembourg':'LU','Malaysia':'MY','Mexico':'MX','Moldova':'MD','Morocco':'MA',
                'Netherlands':'NL','New Zealand':'NZ','Nigeria':'NG','Norway':'NO','Oman':'OM','Pakistan':'PK',
                'Panama':'PA','Paraguay':'PY','Peru':'PE','Philippines':'PH','Poland':'PL','Portugal':'PT',
                'Qatar':'QA','Romania':'RO','Russia':'RU','Saudi Arabia':'SA','Serbia':'RS','Singapore':'SG',
                'Slovakia':'SK','Slovenia':'SI','South Africa':'ZA','South Korea':'KR','Spain':'ES',
                'Sweden':'SE','Switzerland':'CH','Syria':'SY','Taiwan':'TW','Thailand':'TH','Tunisia':'TN',
                'Turkey':'TR','Ukraine':'UA','United Arab Emirates':'AE','United Kingdom':'GB',
                'United States':'US','Uruguay':'UY','Uzbekistan':'UZ','Venezuela':'VE','Vietnam':'VN'
            };
            var regionValues = {}, selected = [];
            topCountries.forEach(function (item) {
                var iso = nameToIso[item.country] || (item.country.length === 2 ? item.country.toUpperCase() : null);
                if (iso) { regionValues[iso] = item.count; selected.push(iso); }
            });
            if (document.getElementById('session-by-countries') && typeof jsVectorMap !== 'undefined') {
                new jsVectorMap({
                    selector: '#session-by-countries',
                    map: 'world',
                    zoomOnScroll: false,
                    zoomButtons: true,
                    regionStyle: {
                        initial: { stroke: '#aab9d14d', strokeWidth: .25, fill: '#aab9d14d', fillOpacity: 1 },
                        selected: { fill: theme('primary') }
                    },
                    selectedRegions: selected,
                    series: { regions: [{ values: regionValues, scale: ['#90CAF9','#0D47A1'], normalizeFunction: 'polynomial' }] }
                });
            }
            var legendEl = document.getElementById('countryLegend');
            var palette = ['#0D47A1','#1565C0','#1976D2','#1E88E5','#42A5F5'];
            if (legendEl && topCountries.length) {
                legendEl.innerHTML = '<div class="d-flex flex-wrap gap-2 mt-2">' +
                    topCountries.map(function (item, i) {
                        return '<span class="badge px-3 py-2" style="background:' + palette[i] + ';font-size:.8rem;">' +
                            item.country + '&nbsp;&nbsp;<strong>' + item.count + '</strong></span>';
                    }).join('') + '</div>';
            }
        })();
        @endif

        /* DataTables */
        if (window.jQuery) {
            if ($('#deafult_ordering_table').length) {
                $('#deafult_ordering_table').DataTable({ order: [[5,'DESC']], pageLength: 8, lengthChange: false });
            }
            if ($('#leadListsTable').length) {
                $('#leadListsTable').DataTable({ order: [[0,'DESC']], pageLength: 8, lengthChange: false });
            }
        }
    })();
    </script>
@endsection