@extends('backend.layout.app')

@section('content')
    <div class="page-content">

        <!-- Filter Dropdown -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">LMS Dashboard Overview</h4>
            <form method="GET" id="timeFrameForm">
                <form method="GET">
                    <select name="time_frame" class="form-select w-auto mb-3" onchange="this.form.submit()">
                        <option value="daily" {{ $timeFrame == 'daily' ? 'selected' : '' }}>Daily</option>
                        <option value="weekly" {{ $timeFrame == 'weekly' ? 'selected' : '' }}>Weekly</option>
                        <option value="monthly" {{ $timeFrame == 'monthly' ? 'selected' : '' }}>Monthly</option>
                    </select>
                </form>

        </div>


        <!-- Charts -->
        <div class="row mt-4">
            <div class="col-12 ">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="card-header d-flex align-items-center gap-2 mb-2">
                            <div style="background-color: #dbeafe; color: #2563eb; width: 40px; height: 40px;"
                                class="rounded-circle d-flex align-items-center justify-content-center">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                                    style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                    <path
                                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h6v14H5zm14 0h-6v-7h6v7zm0-9h-6V5h6v5z">
                                    </path>
                                </svg>

                            </div>


                            <h5 class="mb-0">Earning Growth (
                                @switch($timeFrame)
                                    @case('daily')
                                        Today
                                    @break

                                    @case('weekly')
                                        This Week
                                    @break

                                    @case('monthly')
                                        This Month
                                    @break

                                    @default
                                        {{ $timeFrame }}
                                @endswitch
                                )</h5>
                        </div>

                        <div id="earningsChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 ">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="card-header d-flex align-items-center gap-2 mb-2">
                            <div style="background-color: #dbeafe; color: #2563eb; width: 40px; height: 40px;"
                                class="rounded-circle d-flex align-items-center justify-content-center">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                                    style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                    <path
                                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h6v14H5zm14 0h-6v-7h6v7zm0-9h-6V5h6v5z">
                                    </path>
                                </svg>

                            </div>
                            <h5 class="mb-0">
                                Top 5 Courses
                                (
                                @switch($timeFrame)
                                    @case('daily')
                                        Today
                                    @break

                                    @case('weekly')
                                        This Week
                                    @break

                                    @case('monthly')
                                        This Month
                                    @break

                                    @default
                                        {{ $timeFrame }}
                                @endswitch
                                )
                            </h5>
                        </div>


                        <div id="topCoursesChart"></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        var earningLabels = @json($earningLabels);
        var earningsData = @json($earnings);

        // Fallback if empty or all zeros
        if (!earningLabels.length || earningsData.every(val => val === 0)) {
            earningLabels = ['No Earnings'];
            earningsData = [0];
        }

        var earningsOptions = {
            chart: {
                type: 'area',
                height: 400
            },
            series: [{
                name: 'Earnings',
                data: earningsData
            }],
            xaxis: {
                categories: earningLabels
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return "৳" + val;
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    type: "vertical",
                    gradientToColors: ['#4CAF50']
                }
            },
            colors: ['#4CAF50'],
            grid: {
                borderColor: '#e7e7e7',
                strokeDashArray: 4
            }
        };

        new ApexCharts(document.querySelector("#earningsChart"), earningsOptions).render();






        var courseLabels = @json($courseLabels);
        var courseTotals = @json($courseTotals);

        // Fallback if empty
        if (!courseLabels || courseLabels.length === 0) {
            courseLabels = ['No Enrollment'];
            courseTotals = [0];
        }

        var topCoursesOptions = {
            chart: {
                type: 'bar',
                height: 400,
                toolbar: {
                    show: false
                },
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 800
                }
            },
            series: [{
                name: 'Revenue',
                data: courseTotals
            }],
            xaxis: {
                categories: courseLabels,
                title: {
                    text: 'Courses'
                },
                labels: {
                    rotate: -45,
                    style: {
                        fontSize: '12px'
                    }
                }
            },
            yaxis: {
                title: {
                    text: 'Revenue (৳)'
                },
                labels: {
                    formatter: function(val) {
                        return "৳" + val;
                    }
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return "৳" + val;
                },
                style: {
                    fontSize: '12px',
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return "৳" + val;
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    type: "vertical",
                    gradientToColors: ['#81C784']
                }
            },
            colors: ['#4CAF50'],
            noData: {
                text: 'No courses found',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    fontSize: '16px',
                    color: '#888'
                }
            },
            grid: {
                borderColor: '#e7e7e7',
                strokeDashArray: 4
            }
        };

        var topCoursesChart = new ApexCharts(document.querySelector("#topCoursesChart"), topCoursesOptions);
        topCoursesChart.render();
    </script>
@endsection