@extends('crm.layouts.master')
@section('title','CRM')
@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 (in_array($label, ['Deposit', 'In progress', 'Meeting'], true)) {
            $qualifiedCount += (int) ($statusCounts[$i] ?? 0);
        }
    }
    $qualifiedPct = $leads > 0 ? min(100, (int) round(($qualifiedCount / max(1, $leads)) * 100)) : 0;
    $dealsClosed = array_sum($depositCountSeries);
    $revenueMonth = $tradingStats['deposits_this_month'] ?? 0;
@endphp
@section('main-content')
    <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3">
        <div class="flex-grow-1">
            <h4 class="fs-xl fw-bold mb-1">CRM</h4>
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="{{ route('crm.dashboard') }}">Dashboards</a></li>
                <li class="breadcrumb-item active">CRM</li>
            </ol>
        </div>
    </div>

    <div class="crm-kpi-row crm-kpi-row--5">
        <div class="crm-kpi-cell">
            <div class="card crm-welcome-card">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between gap-2">
                        <div>
                            <p class="welcome-kicker">Good Day,</p>
                            <h3 class="welcome-name">{{ $welcomeName }}!</h3>
                        </div>
                        <img src="{{ asset('paces/assets/images/svg/email-campaign.svg') }}" alt="" class="welcome-art 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-2">
                        <i class="ti ti-calendar"></i>
                        {{ now()->format('M j, Y') }}
                    </span>
                    <span class="d-flex align-items-center gap-2">
                        <i class="ti ti-clock"></i>
                        <span id="clock-widget">{{ now()->format('g:i:s A') }}</span>
                    </span>
                </div>
            </div>
        </div>
        @if($isManager && !empty($tradingStats))
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Pending Deposits</p>
                        <h3 class="mb-1">{{ $tradingStats['pending_deposits'] }}</h3>
                        <a href="{{ route('trading.deposits') }}" class="fs-xs text-muted">View all &rarr;</a>
                    </div>
                </div>
            </div>
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Pending Withdrawals</p>
                        <h3 class="mb-1">{{ $tradingStats['pending_withdrawals'] }}</h3>
                        <a href="{{ route('trading.withdrawals') }}" class="fs-xs text-muted">View all &rarr;</a>
                    </div>
                </div>
            </div>
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Active Portal Clients</p>
                        <h3 class="mb-1">{{ $tradingStats['active_clients'] }}</h3>
                    </div>
                </div>
            </div>
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">KYC Pending Review</p>
                        <h3 class="mb-1">{{ $tradingStats['pending_kyc'] }}</h3>
                        <a href="{{ route('kyc.index') }}" class="fs-xs text-muted">View queue &rarr;</a>
                    </div>
                </div>
            </div>
        @else
            @if(Auth::user()->access_level != 'Agent')
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Total Users</p>
                        <h3 class="mb-0">{{ $users->count() }}</h3>
                    </div>
                </div>
            </div>
            @endif
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">{{ Auth::user()->access_level == 'Agent' ? 'Leads Allow' : 'Total Leads' }}</p>
                        <h3 class="mb-0">{{ $leads }}</h3>
                    </div>
                </div>
            </div>
            @if(Auth::user()->access_level == 'Admin')
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Offices</p>
                        <h3 class="mb-0">{{ $offices->count() }}</h3>
                    </div>
                </div>
            </div>
            @endif
            @if(Auth::user()->access_level == 'Admin' || Auth::user()->access_level == 'Office Manager')
            <div class="crm-kpi-cell">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted text-uppercase fs-xs fw-semibold mb-1">Desks</p>
                        <h3 class="mb-0">{{ $desks->count() }}</h3>
                    </div>
                </div>
            </div>
            @endif
        @endif
    </div>

    <div class="crm-kpi-row crm-kpi-row--4">
        <div class="crm-kpi-cell">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted text-uppercase fs-xs fw-semibold mb-2">Leads Generated</p>
                            <h3 class="mb-0" data-target="{{ (int) $leads }}">{{ $leads }}</h3>
                        </div>
                        <div id="leads-generated-chart" class="crm-kpi-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="crm-kpi-cell">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted text-uppercase fs-xs fw-semibold mb-2">Qualified Leads</p>
                            <h3 class="mb-0">{{ $qualifiedCount }}</h3>
                            <p class="mb-0 fs-xs text-muted">{{ $qualifiedPct }}% of pipeline</p>
                        </div>
                        <div id="qualified-leads-chart" class="crm-kpi-radial"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="crm-kpi-cell">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted text-uppercase fs-xs fw-semibold mb-2">Deals Closed</p>
                            <h3 class="mb-0">{{ $dealsClosed }}</h3>
                            <p class="mb-0 fs-xs text-muted">Last 30 days</p>
                        </div>
                        <div id="deals-closed-chart" class="crm-kpi-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="crm-kpi-cell">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted text-uppercase fs-xs fw-semibold mb-2">Revenue Generated</p>
                            <h3 class="mb-0">${{ number_format($revenueMonth, 0) }}</h3>
                            <p class="mb-0 fs-xs text-muted">This month</p>
                        </div>
                        <div id="revenue-generated-chart" class="crm-kpi-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-8">
            <div class="card mb-3">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">Overview (Last 30 Days)</h5>
                </div>
                <div class="card-body">
                    <div id="dash-revenue-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Lead Source</h5>
                </div>
                <div class="card-body">
                    @if(count($statusLabels))
                        <div id="most-leads-chart"></div>
                    @else
                        <p class="text-muted mb-0">No lead status data yet.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($isManager)
    <div class="row">
        <div class="col-xxl-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Sessions by Countries</h5>
                </div>
                <div class="card-body">
                    <div id="session-by-countries" style="height: 260px;"></div>
                    <div id="countryLegend" class="mt-2"></div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Lead Status Funnel</h5>
                </div>
                <div class="card-body">
                    @if(count($statusLabels))
                        <div id="funnelChart"></div>
                    @else
                        <p class="text-muted mb-0">No funnel data yet.</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-xxl-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Agent Performance</h5>
                </div>
                <div class="card-body">
                    <div id="agentChart"></div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($isManager)
        <div class="row">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Lead list with leads status</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                                <thead>
                                <tr>
                                    <th>ID#</th>
                                    <th>List Name</th>
                                    <th>Priority</th>
                                    <th>Office</th>
                                    <th>Create Date</th>
                                    <th>Total Leads</th>
                                    <th>New</th>
                                    <th>Call again</th>
                                    <th>No answer</th>
                                    <th>Not interested</th>
                                    <th>Wrong Details</th>
                                    <th>Deposit</th>
                                    <th>In progress</th>
                                    <th>Meeting</th>
                                    <th>No money</th>
                                    <th>Language barrier</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($leadLists as $list)
                                    <tr>
                                        <td>{{ $list->id }}</td>
                                        <td>{{ $list->list_name }}</td>
                                        <td>{{ $list->priority }}</td>
                                        <td>{{ $list->office_names }}</td>
                                        <td>{{ date('d-m-Y', strtotime($list->create_date)) }}</td>
                                        <td>{{ $list->total }}</td>
                                        <td>{{ $list->new_count }}</td>
                                        <td>{{ $list->call_again_count }}</td>
                                        <td>{{ $list->no_answer_count }}</td>
                                        <td>{{ $list->not_interested_count }}</td>
                                        <td>{{ $list->wrong_details_count }}</td>
                                        <td>{{ $list->deposit_count }}</td>
                                        <td>{{ $list->in_progress_count }}</td>
                                        <td>{{ $list->meeting_count }}</td>
                                        <td>{{ $list->no_money_count }}</td>
                                        <td>{{ $list->language_barrier_count }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@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 () {
        var clock = document.getElementById('clock-widget');
        if (clock) {
            var tick = function () { clock.innerText = (new Date).toLocaleTimeString(); };
            tick();
            var clockInterval = setInterval(tick, 1000);
            window.addEventListener('beforeunload', function () { clearInterval(clockInterval); });
        }

        var depositAmount = {!! $deposit_amount ?: '[]' !!};
        var depositCount = {!! $deposit_count ?: '[]' !!};
        var labelsDate = {!! $labels_date ?: '[]' !!};
        var statusLabels = {!! $lead_status ?: '[]' !!};
        var statusCounts = {!! $status_count ?: '[]' !!};
        var sparkFallback = [12, 18, 14, 22, 19, 28, 24, 30, 26, 32, 29];

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

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

        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')]
                };
            }
        });

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

        new CustomApexChart({
            selector: '#revenue-generated-chart',
            options: function () {
                return {
                    chart: { type: 'bar', height: 60, sparkline: { enabled: true } },
                    plotOptions: { bar: { horizontal: false, columnWidth: '60%', borderRadius: 4 } },
                    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 (e) { return '$' + e; }, title: { formatter: function () { return 'Revenue'; } } }, marker: { show: false } }
                };
            }
        });

        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: 324, toolbar: { show: false }, offsetX: 0 },
                        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] } }
                    };
                }
            });
        }

        if (document.getElementById('most-leads-chart') && statusLabels.length) {
            new CustomApexChart({
                selector: '#most-leads-chart',
                options: function () {
                    return {
                        chart: { height: 243, type: 'donut' },
                        legend: { show: false },
                        stroke: { width: 0 },
                        plotOptions: { pie: { donut: { size: '75%', 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')],
                        dataLabels: { enabled: false }
                    };
                }
            });
        }

        @if($isManager)
        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: 'Leads', data: combined.map(function (x) { return x.count; }) }],
                        chart: { type: 'bar', height: 260, 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')]
                    };
                }
            });
        }

        var agentData = {!! $agentPerformance !!};
        if (document.getElementById('agentChart') && agentData.length) {
            new CustomApexChart({
                selector: '#agentChart',
                options: function () {
                    return {
                        chart: { type: 'bar', height: 260, 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 }
                    };
                }
            });
        }

        (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','Bosnia and Herzegovina':'BA','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','Kyrgyzstan':'KG','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','North Macedonia':'MK','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',
                'Tajikistan':'TJ','Thailand':'TH','Tunisia':'TN','Turkey':'TR',
                'Turkmenistan':'TM','Ukraine':'UA','United Arab Emirates':'AE',
                'United Kingdom':'GB','United States':'US','Uruguay':'UY',
                'Uzbekistan':'UZ','Venezuela':'VE','Vietnam':'VN','Yemen':'YE','Zimbabwe':'ZW'
            };
            var regionValues = {};
            var 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">' +
                    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

        if (window.jQuery && $('#deafult_ordering_table').length) {
            $('#deafult_ordering_table').DataTable({ order: [[0, 'DESC']] });
        }
    })();
    </script>
@endsection