@extends('dashboard.layouts.master')
@section('title','Dashboard | '.env('app_name'))
@section('description', 'View all data on the Dashboard')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/apex-charts/apex-charts.css') }}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css"/>
@endsection
@section('main-content')
    <div class="row g-6">
        <!-- Total Earning card with illustration -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card">
                <div class="row">
                    <div class="col-7">
                        <div class="card-body">
                            <div class="card-info">
                                <h6 class="mb-4 pb-1 text-nowrap">Total Earning</h6>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="mb-0 me-2">${{ number_format($total_trans_amount, 2) }}</h4>
                                </div>
                                <div class="badge bg-label-success rounded-pill">All Time</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="h-100 position-relative">
                            <img src="{{ asset('materio/img/illustrations/illustration-1.png') }}" alt="Earning"
                                 class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2"
                                 width="95"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users card with illustration -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card">
                <div class="row">
                    <div class="col-7">
                        <div class="card-body">
                            <div class="card-info">
                                <h6 class="mb-4 pb-1 text-nowrap">Users</h6>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="mb-0 me-2">{{ number_format($users) }}</h4>
                                </div>
                                <div class="badge bg-label-primary rounded-pill">Registered</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="h-100 position-relative">
                            <img src="{{ asset('materio/img/illustrations/illustration-2.png') }}" alt="Users"
                                 class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2"
                                 width="81"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overview -->
        <div class="col-xxl-6 align-self-end">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="card-title m-0 me-2">Overview</h5>
                    </div>
                    <p class="small mb-0"><span class="h6 mb-0">Current Month Stats</span></p>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-primary rounded shadow-xs">
                                        <i class="icon-base ri ri-money-dollar-circle-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Earning</p>
                                    <h5 class="mb-0">${{ number_format($current_month_total_trans_amount, 0) }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-success rounded shadow-xs">
                                        <i class="icon-base ri ri-exchange-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Transactions</p>
                                    <h5 class="mb-0">{{ number_format($current_month_total_trans) }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-warning rounded shadow-xs">
                                        <i class="icon-base ri ri-building-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Companies</p>
                                    <h5 class="mb-0">{{ number_format($companies) }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-info rounded shadow-xs">
                                        <i class="icon-base ri ri-mail-line icon-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="mb-0">Messages</p>
                                    <h5 class="mb-0">{{ number_format($messages) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Daily Transactions Bar Chart -->
        <div class="col-xxl-4 col-xl-6 col-lg-4 col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Daily Transactions</h5>
                    <p class="text-body mb-0">Current Month</p>
                </div>
                <div class="card-body">
                    <div id="dailyTransactionsChart"></div>
                    <div class="d-flex align-items-center justify-content-around mt-5">
                        <div class="d-flex align-items-center">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-primary rounded">
                                    <i class="icon-base ri ri-exchange-line icon-24px"></i>
                                </div>
                            </div>
                            <div class="ms-3 d-flex flex-column">
                                <h6 class="mb-0">{{ number_format($total_trans) }}</h6>
                                <p class="mb-0">Total</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="avatar">
                                <div class="avatar-initial bg-label-success rounded">
                                    <i class="icon-base ri ri-money-dollar-circle-line icon-24px"></i>
                                </div>
                            </div>
                            <div class="ms-3 d-flex flex-column">
                                <h6 class="mb-0">${{ number_format($total_trans_amount, 0) }}</h6>
                                <p class="mb-0">Earnings</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- World Map - Blocked Countries -->
        <div class="col-xxl-8 col-12">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="mb-0">Visitor Map (Last 30 Days)</h5>
                    <div>
                        <span class="badge bg-label-success me-1">Allowed</span>
                        <span class="badge bg-label-danger">Blocked</span>
                    </div>
                </div>
                <div class="card-body">
                    <div id="worldMap" style="height: 350px;"></div>
                </div>
            </div>
        </div>

        <!-- Top 10 Visitors -->
        <div class="col-xxl-6 col-12">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Top 10 Visitors (Last 30 Days)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                            <tr>
                                <th>IP Address</th>
                                <th>Country</th>
                                <th>Hits</th>
                                <th>ISP</th>
                                <th>Flags</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($topVisitors as $visitor)
                                <tr>
                                    <td><code>{{ $visitor->ip_address }}</code></td>
                                    <td>{{ $visitor->country ?? 'N/A' }}</td>
                                    <td><span class="badge bg-label-primary">{{ number_format($visitor->visite_count) }}</span></td>
                                    <td><small>{{ $visitor->isp ?? '-' }}</small></td>
                                    <td>
                                        @if($visitor->isProxy == 1 || $visitor->isProxy === '1' || $visitor->isProxy === 'true')
                                            <span class="badge bg-danger">Proxy</span>
                                        @endif
                                        @if($visitor->isVPN == 1 || $visitor->isVPN === '1' || $visitor->isVPN === 'true')
                                            <span class="badge bg-warning">VPN</span>
                                        @endif
                                        @if($visitor->isBot == 1 || $visitor->isBot === '1' || $visitor->isBot === 'true')
                                            <span class="badge bg-info">Bot</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blocked Country Hits -->
        <div class="col-xxl-6 col-12">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Country Hits (Last 30 Days)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="sticky-top">
                            <tr>
                                <th>Country</th>
                                <th>Hits</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($blockedCountryHits as $hit)
                                <tr>
                                    <td>{{ $hit->country }}</td>
                                    <td><span class="badge bg-label-primary">{{ number_format($hit->total_hits) }}</span></td>
                                    <td>
                                        @if($hit->is_blocked)
                                            <span class="badge bg-danger">Blocked</span>
                                        @else
                                            <span class="badge bg-success">Allowed</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('materio/vendor/libs/apex-charts/apexcharts.js') }}"></script>
    <script>
        $(document).ready(function () { $("#dashboard-page").addClass('active'); });

        (function () {
            var cardColor = config.colors.cardColor,
                bodyColor = config.colors.bodyColor,
                headingColor = config.colors.headingColor,
                fontFamily = config.fontFamily;

            var earningsDays = {!! json_encode($currentMonthEarnings->pluck('day')) !!};
            var totalEarnings = {!! json_encode($currentMonthEarnings->pluck('total_earnings')->map(fn($v) => (float)$v)) !!};
            var transDays = {!! json_encode($currentMonthTransactions->pluck('day')) !!};
            var transData = {!! json_encode($currentMonthTransactions->pluck('total_transactions')) !!};
            var pkgNames = {!! json_encode($top4packages->pluck('package.name')) !!};
            var pkgCounts = {!! json_encode($top4packages->pluck('total_packages')) !!};

            // Daily Transactions Bar Chart
            var el4 = document.querySelector('#dailyTransactionsChart');
            if (el4) {
                var last7Days = transDays.slice(-7), last7Data = transData.slice(-7);
                var barColors = last7Data.map(function (v, i) { return i === 4 ? config.colors.primary : config.colors_label.primary; });
                new ApexCharts(el4, {
                    chart: { height: 250, type: 'bar', parentHeightOffset: 0, toolbar: { show: false } },
                    plotOptions: { bar: { borderRadius: 4, distributed: true, columnWidth: '60%' } },
                    series: [{ data: last7Data }], tooltip: { enabled: false }, legend: { show: false }, dataLabels: { enabled: false },
                    colors: barColors,
                    grid: { show: false, padding: { top: -15, left: -7, right: -4 } },
                    states: { hover: { filter: { type: 'none' } }, active: { filter: { type: 'none' } } },
                    xaxis: { axisTicks: { show: false }, axisBorder: { show: false }, categories: last7Days, labels: { style: { colors: bodyColor } } },
                    yaxis: { show: false }
                }).render();
            }

        })();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/js/jsvectormap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js"></script>
    <script>
        (function () {
            var countryCodes = @json($countryCodes);
            var allowedCountries = @json($allowedCountries);
            var blockedHits = @json($blockedCountryHits);

            // Build marker + region data
            var regionValues = {};
            var markers = [];

            blockedHits.forEach(function (item) {
                var code = countryCodes[item.country];
                if (code) {
                    code = code.toUpperCase();
                    if (item.is_blocked) {
                        regionValues[code] = item.total_hits;
                    }
                }
            });

            // Color all allowed countries green, blocked with hits red
            var regionStyle = {};
            // Set allowed countries
            Object.keys(countryCodes).forEach(function (name) {
                var code = countryCodes[name].toUpperCase();
                if (allowedCountries.indexOf(name) !== -1) {
                    regionStyle[code] = { fill: '#28c76f', fillOpacity: 0.4 };
                }
            });
            // Override blocked countries that have hits
            Object.keys(regionValues).forEach(function (code) {
                var hits = regionValues[code];
                var opacity = Math.min(0.3 + (hits / 1000) * 0.7, 1);
                regionStyle[code] = { fill: '#ea5455', fillOpacity: opacity };
            });

            new jsVectorMap({
                selector: '#worldMap',
                map: 'world',
                backgroundColor: 'transparent',
                zoomOnScroll: true,
                zoomButtons: false,
                regionStyle: {
                    initial: { fill: '#444466', fillOpacity: 0.3, stroke: '#555577', strokeWidth: 0.5 },
                    hover: { fillOpacity: 0.7 }
                },
                regions: { selected: regionStyle },
                selectedRegions: Object.keys(regionStyle),
                regionsSelectable: false,
                showTooltip: true,
                onRegionTooltipShow: function (event, tooltip, code) {
                    var name = null;
                    for (var n in countryCodes) {
                        if (countryCodes[n].toUpperCase() === code) { name = n; break; }
                    }
                    if (!name) return;
                    var hit = blockedHits.find(function (h) { return h.country === name; });
                    var hits = hit ? hit.total_hits : 0;
                    var status = allowedCountries.indexOf(name) !== -1 ? '<span style="color:#28c76f">Allowed</span>' : '<span style="color:#ea5455">Blocked</span>';
                    tooltip.text('<strong>' + name + '</strong><br>Hits: ' + hits.toLocaleString() + '<br>Status: ' + status, true);
                }
            });
        })();
    </script>
@endsection