@php
    $headerOption = [
        'title' => $module,
        'noCardView' => true,
    ];
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="row mt-3">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Monthly Sponsorship Growth </h4>
                    <p class="text-muted mb-3">Tracks sponsorship growth trends over time</p>

                    <div id="line_chart_datalabel" class="apex-charts" dir="ltr"></div>                              
                </div>
            </div><!--end card-->
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Revenue: Actual vs Target </h4>
                    <p class="text-muted mb-3">Compare actual revenue against monthly targets</p>
                    
                    <div id="line_chart_dashed" class="apex-charts" dir="ltr"></div>        
                </div>
            </div><!--end card-->
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Weekly Fan Engagement Volume </h4>
                    <p class="text-muted mb-3">Show fan engagement intensity over time</p>

                    <div id="spline_area" class="apex-charts" dir="ltr"></div>                      
                </div>
            </div><!--end card-->
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Top Athletes by Follower Count </h4>
                    <p class="text-muted mb-3">Ranking of athletes based on social media followers</p>
                    
                    <div id="bar_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!--end card-->
        </div>


        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Platform Performance Overview </h4>
                    <p class="text-muted mb-3">Multi-metric dashboard showing sponsorships, engagement & revenue</p>
                    
                    <div id="mixed_chart" class="apex-charts" dir="ltr"></div> 
                </div>
            </div><!--end card-->
        </div>



        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Event Distribution by Sport </h4>
                    <p class="text-muted mb-3">Compare event counts across different sports categories</p>
                    
                    <div id="column_chart" class="apex-charts" dir="ltr"></div>                                      
                </div>
            </div><!--end card-->
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Payouts by Country </h4>
                    <p class="text-muted mb-3">Total sponsorship payouts distributed by country</p>
                    
                    <div id="column_chart_datalabel" class="apex-charts" dir="ltr"></div>
                </div>
            </div><!--end card-->
        </div>
        

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Athlete Performance Radar</h4>
                    <p class="text-muted mb-3">Compare athlete strengths: Speed, Endurance, Skill & Engagement</p>
                    
                    <div id="radial_chart" class="apex-charts" dir="ltr"></div>  
                </div>
            </div><!--end card-->
            
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">Sponsorship Type Distribution</h4>
                    <p class="text-muted mb-3">Breakdown of sponsorship categories by percentage share</p>
                    
                    <div id="pie_chart" class="apex-charts" dir="ltr"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-1">User Ecosystem Breakdown</h4>
                    <p class="text-muted mb-3">Distribution of user types across the platform</p>
                    
                    <div id="donut_chart" class="apex-charts"  dir="ltr"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
@endsection
@push('page_script')
    <!-- apexcharts -->
    <script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script>
        // Sport Nexus Analytics Dashboard Configuration

        // 1. Monthly Sponsorship Growth (Line with Data Labels)
        var sponsorshipGrowthOptions = {
            series: [{
                name: "New Sponsorships",
                data: [45, 62, 70, 65, 95, 112, 102, 145, 147, 178, 195, 210]
            }],
            chart: {
                height: 350,
                type: 'line',
                zoom: { enabled: false },
                toolbar: { show: false },
                foreColor: '#333'
            },
            dataLabels: { 
                enabled: true,
                style: { colors: ['#333'] }
            },
            stroke: { curve: 'straight' },
            colors: ['#556ee6'],
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: { 
                title: { text: 'Number of Sponsorships', style: { color: '#333' } },
                labels: { style: { colors: ['#333'] } }
            },
            title: { text: 'Monthly Sponsorship Growth Trend', align: 'left', style: { color: '#333' } }
        };

        // 2. Revenue: Actual vs Target (Dashed Line)
        var revenueComparisonOptions = {
            series: [{
                name: "Actual Revenue",
                data: [120000, 140000, 160000, 185000, 200000, 215000]
            }, {
                name: "Target Revenue",
                data: [100000, 130000, 170000, 190000, 210000, 220000]
            }],
            chart: { 
                height: 350, 
                type: 'line', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            stroke: { width: [2, 2], dashArray: [0, 5] },
            colors: ['#34c38f', '#f46a6a'],
            xaxis: { 
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: { 
                title: { text: 'Revenue ($)', style: { color: '#333' } },
                labels: {
                    style: { colors: ['#333'] },
                    formatter: function (value) {
                        return "$" + value.toLocaleString();
                    }
                }
            },
            legend: { 
                position: 'top',
                labels: { colors: '#333' }
            }
        };

        // 3. Weekly Fan Engagement Volume (Spline Area)
        var fanEngagementOptions = {
            series: [{
                name: "Engagement Score",
                data: [12000, 11500, 18300, 18900, 26800, 22200, 35700, 40100]
            }],
            chart: { 
                height: 350, 
                type: 'area', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth' },
            colors: ['#f1b44c'],
            xaxis: { 
                categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: { 
                title: { text: 'Engagement Score', style: { color: '#333' } },
                labels: { style: { colors: ['#333'] } }
            },
            fill: { type: 'gradient', gradient: { shadeIntensity: 1, type: "vertical" } }
        };

        // 4. Event Distribution by Sport (Column)
        var eventDistributionOptions = {
            series: [{
                name: 'Events',
                data: [42, 28, 15, 12, 8, 6]
            }],
            chart: { 
                height: 350, 
                type: 'bar', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            colors: ['#556ee6'],
            xaxis: { 
                categories: ['Football', 'Basketball', 'Swimming', 'Tennis', 'Athletics', 'Cycling'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: { 
                title: { text: 'Number of Events', style: { color: '#333' } },
                labels: { style: { colors: ['#333'] } }
            },
            title: { text: 'Event Distribution Across Sports', align: 'left', style: { color: '#333' } }
        };

        // 5. Payouts by Country (Column with Labels)
        var payoutsByCountryOptions = {
            series: [{
                name: 'Payouts',
                data: [550000, 320000, 280000, 180000, 150000]
            }],
            chart: { 
                height: 350, 
                type: 'bar', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            dataLabels: { 
                enabled: true, 
                formatter: function (val) { return "$" + val.toLocaleString(); },
                style: { colors: ['#333'] }
            },
            colors: ['#34c38f'],
            xaxis: { 
                categories: ['USA', 'UK', 'Brazil', 'Germany', 'Australia'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: { 
                title: { text: 'Payout Amount ($)', style: { color: '#333' } },
                labels: {
                    style: { colors: ['#333'] },
                    formatter: function (value) {
                        return "$" + value.toLocaleString();
                    }
                }
            }
        };

        // 6. Top Athletes by Follower Count (Bar Chart)
        var topAthletesOptions = {
            series: [{
                name: 'Followers',
                data: [120000, 98000, 85000, 72000, 68000]
            }],
            chart: { 
                height: 350, 
                type: 'bar', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            plotOptions: { bar: { horizontal: true } },
            colors: ['#f46a6a'],
            xaxis: { 
                title: { text: 'Follower Count', style: { color: '#333' } },
                labels: {
                    style: { colors: '#333' },
                    formatter: function (value) {
                        return value.toLocaleString();
                    }
                }
            },
            yaxis: { 
                categories: ['John M.', 'Rafael S.', 'Amina L.', 'Chen W.', 'Maria G.'],
                labels: { style: { colors: '#333' } }
            }
        };

        // 7. Platform Performance Overview (Mixed Chart)
        var platformOverviewOptions = {
            series: [{
                name: 'Sponsorship Count',
                type: 'column',
                data: [30, 45, 60, 75, 88, 102]
            }, {
                name: 'Fan Engagement (k)',
                type: 'area',
                data: [20, 28, 32, 38, 45, 52]
            }, {
                name: 'Revenue ($k)',
                type: 'line',
                data: [120, 140, 160, 185, 200, 215]
            }],
            chart: { 
                height: 350, 
                type: 'line', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            stroke: { width: [0, 2, 2], curve: 'smooth' },
            colors: ['#556ee6', '#f1b44c', '#34c38f'],
            xaxis: { 
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                labels: { style: { colors: '#333' } }
            },
            yaxis: [
                { 
                    title: { text: 'Count / Score', style: { color: '#333' } },
                    labels: { style: { colors: ['#333'] } }
                },
                { 
                    opposite: true, 
                    title: { text: 'Revenue ($k)', style: { color: '#333' } },
                    labels: { style: { colors: ['#333'] } }
                }
            ],
            legend: { 
                position: 'top',
                labels: { colors: '#333' }
            }
        };

        // 8. Athlete Performance Radar (4 Metrics)
        var athleteRadarOptions = {
            series: [{
                name: 'Performance Score',
                data: [78, 85, 92, 74]
            }],
            chart: { 
                height: 318, 
                type: 'radar', 
                toolbar: { show: false },
                foreColor: '#333'
            },
            colors: ['#f46a6a'],
            xaxis: { 
                categories: ['Speed', 'Endurance', 'Skill Index', 'Fan Engagement'],
                labels: { style: { colors: ['#333', '#333', '#333', '#333'] } }
            },
            yaxis: { show: false },
            markers: { size: 6 }
        };

        // 9. Sponsorship Type Distribution (Pie Chart)
        var sponsorshipTypesOptions = {
            series: [35, 20, 15, 18, 12],
            chart: { 
                height: 350, 
                type: 'pie',
                foreColor: '#333'
            },
            labels: ['Monetary', 'Equipment', 'Travel', 'Training', 'Medical'],
            colors: ['#556ee6', '#34c38f', '#f1b44c', '#f46a6a', '#50a5f1'],
            legend: { 
                position: 'bottom',
                labels: { colors: '#333' }
            }
        };

        // 10. User Ecosystem Breakdown (Donut Chart)
        var userEcosystemOptions = {
            series: [4500, 800, 350, 22000, 12],
            chart: { 
                height: 350, 
                type: 'donut',
                foreColor: '#333'
            },
            labels: ['Athletes', 'Teams', 'Sponsors', 'Fans', 'Admin'],
            colors: ['#556ee6', '#34c38f', '#f1b44c', '#f46a6a', '#50a5f1'],
            legend: { 
                position: 'bottom',
                labels: { colors: '#333' }
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Total Users',
                                color: '#333',
                                formatter: function () {
                                    return '27,662';
                                }
                            }
                        }
                    }
                }
            }
        };

        // Initialize all charts
        document.addEventListener('DOMContentLoaded', function() {
            new ApexCharts(document.querySelector("#line_chart_datalabel"), sponsorshipGrowthOptions).render();
            new ApexCharts(document.querySelector("#line_chart_dashed"), revenueComparisonOptions).render();
            new ApexCharts(document.querySelector("#spline_area"), fanEngagementOptions).render();
            new ApexCharts(document.querySelector("#column_chart"), eventDistributionOptions).render();
            new ApexCharts(document.querySelector("#column_chart_datalabel"), payoutsByCountryOptions).render();
            new ApexCharts(document.querySelector("#bar_chart"), topAthletesOptions).render();
            new ApexCharts(document.querySelector("#mixed_chart"), platformOverviewOptions).render();
            new ApexCharts(document.querySelector("#radial_chart"), athleteRadarOptions).render();
            new ApexCharts(document.querySelector("#pie_chart"), sponsorshipTypesOptions).render();
            new ApexCharts(document.querySelector("#donut_chart"), userEcosystemOptions).render();
        });
    </script>
@endpush