@extends('admin.layouts.master')

@section('title')
    Course Goal Report |
@endsection

@section('content')
<div class="row mt-4">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title">Course Goal Report List</h4>

                    {{-- <div class="d-flex">
                        <a href="" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="right" title="Add Quiz"><i class="mdi mdi-library-plus"></i> Add Quiz</a>
                    </div> --}}
                </div>
                <div class="table-responsive pt-3">
                    <div class="text-center pb-3 pl-1" style="max-width: 300px;">
                        <select id="courseGoalIndex" name="courseGoalId" class="form-control border-info" onchange="updateCourseManageTable(this.value)">
                                <option value="all">All</option>
                            @foreach($courseGoalManages as $index => $courseGoalManage)
                                <option value="{{ $index }}">
                                    {{ $courseGoalManage->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <table id="courseGoalManageReportTable" class="table table-bordered">
                        <thead>
                            <tr class="text-center bg-info text-dark">
                                <th># Id</th>
                                <th>Course name</th>
                                <th>Course goal</th>
                                <th>Status</th>
                                <th>Running Students</th>
                                <th>Total Students</th>
                            </tr>
                        </thead>
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        {{-- @php
                            $index = 0;
                        @endphp --}}
                        <tbody>
                            {{-- @forelse ($courseGoalManages[$index]->courseManages as $courseManage)
                            <tr class="text-center">
                                <td>{{ $courseManage->id }}</td>
                                <td>{{ $courseManage->is_paid == 1 ? 'Paid' : 'Free' }}</td>
                                <td>{{ $courseManage->title }}</td>
                                <td>{{ count($courseManage->courseStudents) }}</td>
                                <td>{{ $courseManage->courseStudents->sum('price') }}</td>

                            </tr>
                            @empty
                            <tr class="text-center">
                                <td colspan="8">No data found</td>
                            </tr>
                            @endforelse --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    function updateCourseManageTable(index) {
        if(index == 'all'){
            const courseGoalManages = @json($courseGoalManages); // Convert PHP variable to JavaScript array
            const selectedCourseGoalManage = courseGoalManages;

            const tbody = document.querySelector('#courseGoalManageReportTable tbody');
            tbody.innerHTML = ''; // Clear existing rows

            $('#courseGoalManageReportTable').DataTable().clear().destroy();

            if (selectedCourseGoalManage && selectedCourseGoalManage.length > 0){
                selectedCourseGoalManage.forEach(courseGoalManage => {
                    // console.log(courseGoalManage);
                    // const relatedEntries = courseGoalManage.course_manages.length;
                    if (courseGoalManage && courseGoalManage.course_manages.length > 0) {

                        courseGoalManage.course_manages.forEach(courseManage => {
                            // console.log(courseManage.course_goal_manage.get_start[0].students);
                            const tr = document.createElement('tr');
                            tr.classList.add('text-center');

                            // Check if get_start exists and is an array
                            // const studentsCount = Array.isArray(courseManage.course_goal_manage.get_start) && courseManage.course_goal_manage.get_start.length > 0
                            //     ? courseManage.course_goal_manage.get_start[0].students.length
                            //     : 0; // Default to 0 if not available
                            const studentsCount = Array.isArray(courseManage.course_goal_manage.get_start)
                                ? courseManage.course_goal_manage.get_start.reduce((total, start) => {
                                    return total + (Array.isArray(start.students) ? start.students.length : 0);
                                }, 0)
                                : 0;

                            const userIds = new Set();

                            if (Array.isArray(courseManage.modules)) {
                                // console.log("found modules");
                                courseManage.modules.forEach(module => {
                                    if (Array.isArray(module.quizzes)) {
                                        // console.log("found quizzes");
                                        module.quizzes.forEach(quiz => {
                                            if (Array.isArray(quiz.quiz_questions)) {
                                                // console.log("found questions");
                                                quiz.quiz_questions.forEach(question => {
                                                    if (Array.isArray(question.quiz_answers)) {
                                                        // console.log("found answers");
                                                        question.quiz_answers.forEach(answer => {
                                                            if (answer.user_id) {
                                                                userIds.add(answer.user_id); // Add to Set for uniqueness
                                                                // console.log("user_id: "+answer.user_id);
                                                            }
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }

                            const uniqueUserCount = userIds.size;

                            tr.innerHTML = `
                                <td>${courseManage.id}</td>
                                <td>${courseManage.title}</td>
                                <td>${courseGoalManage.title}</td>
                                <td>${courseManage.is_paid == 1 ? 'Paid' : 'Free'}</td>
                                <td>${uniqueUserCount}</td>
                                <td>${studentsCount}</td>
                            `;
                            tbody.appendChild(tr);
                        });
                    }

                });

                if (tbody.children.length > 0) {
                    // Initialize DataTable
                    $('#courseGoalManageReportTable').DataTable();
                }
                else {
                    const tr = document.createElement('tr');
                    tr.classList.add('text-center');
                    tr.innerHTML = '<td colspan="5">No data found</td>';
                    tbody.appendChild(tr);
                }
            }
            else {
                const tr = document.createElement('tr');
                tr.classList.add('text-center');
                tr.innerHTML = '<td colspan="5">No data found</td>';
                tbody.appendChild(tr);
            }
        }
        else{
            const courseGoalManages = @json($courseGoalManages); // Convert PHP variable to JavaScript array
            const selectedCourseGoalManage = courseGoalManages[index];

            const tbody = document.querySelector('#courseGoalManageReportTable tbody');
            tbody.innerHTML = ''; // Clear existing rows

            $('#courseGoalManageReportTable').DataTable().clear().destroy();

            if (selectedCourseGoalManage && selectedCourseGoalManage.course_manages.length > 0) {

                selectedCourseGoalManage.course_manages.forEach(courseManage => {
                    console.log(courseManage);
                    const tr = document.createElement('tr');
                    tr.classList.add('text-center');

                    // Check if get_start exists and is an array
                    // const studentsCount = Array.isArray(courseManage.course_goal_manage.get_start) && courseManage.course_goal_manage.get_start.length > 0
                    //     ? courseManage.course_goal_manage.get_start[0].students.length
                    //     : 0; // Default to 0 if not available
                    const studentsCount = Array.isArray(courseManage.course_goal_manage.get_start)
                        ? courseManage.course_goal_manage.get_start.reduce((total, start) => {
                            return total + (Array.isArray(start.students) ? start.students.length : 0);
                        }, 0)
                        : 0;

                    const userIds = new Set();

                    if (Array.isArray(courseManage.modules)) {
                        courseManage.modules.forEach(module => {
                            if (Array.isArray(module.quizzes)) {
                                module.quizzes.forEach(quiz => {
                                    if (Array.isArray(quiz.quiz_questions)) {
                                        quiz.quiz_questions.forEach(question => {
                                            if (Array.isArray(question.quiz_answers)) {
                                                question.quiz_answers.forEach(answer => {
                                                    if (answer.user_id) {
                                                        userIds.add(answer.user_id); // Add to Set for uniqueness
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }

                    const uniqueUserCount = userIds.size;

                    tr.innerHTML = `
                        <td>${courseManage.id}</td>
                        <td>${courseManage.title}</td>
                        <td>${selectedCourseGoalManage.title}</td>
                        <td>${courseManage.is_paid == 1 ? 'Paid' : 'Free'}</td>
                        <td>${uniqueUserCount}</td>
                        <td>${studentsCount}</td>
                    `;
                    tbody.appendChild(tr);
                });


                if (tbody.children.length > 1) {
                    // Initialize DataTable
                    $('#courseGoalManageReportTable').DataTable();
                }

            } else {
                const tr = document.createElement('tr');
                tr.classList.add('text-center');
                tr.innerHTML = '<td colspan="5">No data found</td>';
                tbody.appendChild(tr);
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        updateCourseManageTable("all"); // Initialize with the first index
    });
</script>