@extends('teacher.layouts.container')

@section('css')

@endsection

@push('stack_styles')
    <style>
        .chart_links p {
            margin-right: 5px;
        }
    </style>
@endpush

@section('content')
    <!-- ------------ charts ------------- -->
    <div class="charts_container">
        <div class="row w-100">

            <div class="col-lg-12">
                <div class="chart_box">
                    <div class="chart_head mb-4">
                        <div class="row">
                            <div class="w-100">
                                <div class="d-flex justify-content-start">
                                    <h5> {{__("users::teachers.subscriptions")}} </h5>
                                </div>
                                <div class="d-flex justify-content-start">
                                    <select name="subscriptions" class="form-control mt-2">
                                        @foreach(range(now()->year, 2024) as $year)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> <!-- end col-lg-6 -->
                        </div> <!-- end row -->
                    </div>
                    <div class="subscriptions_chart_wrapper">
                        <div id="line_chart_subscriptions"></div>
                    </div>
                </div> <!-- end of chart_box -->
            </div> <!-- end of col-lg-12 -->

        </div> <!-- end of row -->
    </div> <!-- end of charts_container -->

    <!-- ------------ general-report ------------- -->
    <section class="general-report mt-5 shadow">
        <div class="row">

            <div class="col-lg-4">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="fas fa-layer-group"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__("users::teachers.total_number_courses")}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{ $allCourses ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="fas fa-check-circle"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__("users::teachers.total_active_courses")}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{ $activeCountCourses ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="fas fa-trash"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__("users::teachers.total_inactive_courses")}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{ $trashedCountCourses ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="fas fa-users"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__("users::teachers.courses_students_number")}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{ $subscriptionCount ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="items">
                    <div class="top mb-3">
                    <span class="icon alert alert-info m-0">
                        <i class="bi bi-currency-dollar"></i>
                    </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__("users::teachers.teacher_dues")}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">
                                {{ $totalCommission ?? 0 }}
                                <span class='currency-dashboard'>{{$defaultCurrencyCode}}</span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- end of row -->

    </section>

    <!-- -------------- tables ----------------- -->
@endsection

@section('inner_js')

    <!--------- new scripts ----------->

    <script src="{{asset('assets/admin/js/lib/Chart.min.js')}}"></script>
    <!-- ------- apex chart -------------- -->
    <script src="{{asset('assets/admin/js/lib/apexcharts.js')}}"></script>
    <!-- ------- data table  -------------- -->
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <!-- ----------- datepicker ----------- -->
    <script type="text/javascript" src="{{asset('assets/admin/js/lib/moment.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/admin/js/lib/daterangepicker.min.js')}}"></script>
    <!-- ---------- charts ---------- -->

    <script>
        $(document).ready(function () {
            const $yearSelect = $('select[name="subscriptions"]');
            const $chartSubscriptionsContainer = $("#line_chart_subscriptions");
            let chartSubscriptions = null;

            // Function to fetch and render the chart
            function fetchAndRenderChart(year) {
                const locale = document.documentElement.lang || 'en';
                fetch(`/${locale}/teacher/chart/subscriptions?year=${year}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const lineSubscriptions = {
                            series: data.series,
                            colors: ['#008FFB'],
                            chart: {
                                height: 350,
                                type: 'area'
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                curve: 'smooth'
                            },
                            xaxis: {
                                categories: data.xAxisCats,
                            },
                            tooltip: {
                                x: {
                                    format: 'dd/MM/yy HH:mm'
                                },
                            },
                        };

                        // Destroy the previous chart instance if it exists
                        if (chartSubscriptions) {
                            chartSubscriptions.destroy();
                        }

                        // Render the new chart
                        chartSubscriptions = new ApexCharts($chartSubscriptionsContainer[0], lineSubscriptions);
                        chartSubscriptions.render();
                    })
                    .catch(error => console.error('Error fetching chart data:', error));
            }

            // Fetch and render the chart for the initially selected year
            fetchAndRenderChart($yearSelect.val());

            // Update the chart when the year selection changes
            $yearSelect.on('change', function () {
                const selectedYear = $(this).val();
                fetchAndRenderChart(selectedYear);
            });
        });
    </script>

@endsection