@extends('admin.layouts.master')
@section('content')
    <div class="row row-deck row-cards">
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-primary text-white avatar">
                                <x-icons.baby-blade/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.children")}}
                            </div>
                            <div class="text-secondary">
                                {{$childrenCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                <x-icons.book/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.courses")}}
                            </div>
                            <div class="text-secondary">
                                {{$coursesCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-x text-danger avatar">
                                <x-icons.users/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.Parents")}}
                            </div>
                            <div class="text-secondary">
                                {{$parentsCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-facebook text-white avatar">
                                <x-icons.langs/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.languages")}}
                            </div>
                            <div class="text-secondary">
                                {{$languagesCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-facebook text-white avatar">
                                <x-icons.building/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.institutes")}}
                            </div>
                            <div class="text-secondary">
                                {{$institutesCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-primary text-white avatar">
                                <x-icons.school/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.instructors")}}
                            </div>
                            <div class="text-secondary">
                                {{$instructorsCount}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                <x-icons.qrcode/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.active-codes")}}
                            </div>
                            <div class="text-secondary">
                                {{$activeRegistrationCodes}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-x text-danger avatar">
                                <x-icons.qrcode/>
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {{__("dashboard.codes-are-used")}}
                            </div>
                            <div class="text-secondary">
                                {{$usedRegistrationCodes}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.users-by-country")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="usersChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.institutes-by-country")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="institutesChart"></canvas>
                </div>
            </div>

        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.instructors-by-country")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="instructorsChart"></canvas>
                </div>
            </div>

        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.registration-codes-(used-depending-on-time)")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="usageOverTimeChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.registration-codes-used-/-not-used")}}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row justify-content-center">
                        <div class="col-8">
                            <canvas id="usageChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-end">
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.ranking-of-institutions-by-number-of-instructors")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="institutesHaveInstructorsChart"></canvas>
                </div>
            </div>

        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.instructors-analytics")}}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="instructorsPieChart"></canvas>
                </div>
            </div>

        </div>
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.latest-lessons")}}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-0">
                        <div id="datatable-buttons_wrapper" class="d-flex justify-content-center"></div>
                    </div>
                    <table class="table table-striped display nowrap" style="width: 100%;" id="lessons-table">
                        <thead>
                        <tr>
                            <th>
                                <input class="form-check-input m-0 check-all" id="check-all" type="checkbox">
                                <label for="check-all" class="mx-2">
                                    {{__("dashboard.title")}}
                                </label>
                            </th>
                            <th>{{__("dashboard.level")}}</th>
                            <th>{{__("dashboard.created-at")}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function () {
            let lessonsTable = initializeDataTable(
                "#lessons-table",
                "{{ route('admin.dashboard') }}",
                [
                    {data: 'id', name: 'id', orderable: false, searchable: false},
                    {data: 'level_id', name: 'level_id', orderable: true, searchable: true},
                    {data: 'created_at', name: 'created_at', orderable: false, searchable: false},
                ],
                true,
                {},
                ['id', 'level_id']
            );
        });
    </script>


    {{--    users by country --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let ctx = document.getElementById('usersChart').getContext('2d');

            let chartData = {
                labels: {!! json_encode($usersByCountry->pluck('country')) !!},
                datasets: [{
                    label: "{{__("dashboard.users")}}",
                    data: {!! json_encode($usersByCountry->pluck('total_users')) !!},
                    backgroundColor: 'rgba(52, 152, 219, 0.6)',
                    borderColor: 'rgba(41, 128, 185, 1)',
                    borderWidth: 1
                }]
            };

            new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    scales: {
                        y: {beginAtZero: true}
                    }
                }
            });
        });
    </script>

    {{--    institiutes by country --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const institutesByCountry = document.getElementById("institutesChart").getContext("2d");

            const institutesByCountryData = {
                labels: @json($institutesByCountry->pluck('country')),
                datasets: [{
                    label: "Institutes",
                    data: @json($institutesByCountry->pluck('total')),
                    backgroundColor: "rgba(75, 192, 192, 0.6)"
                }]
            };

            new Chart(institutesByCountry, {
                type: "bar",
                data: institutesByCountryData,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {display: false}
                    }
                }
            });
        });
    </script>


    {{--    Instructors by country --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const instructorsByCountry = document.getElementById("instructorsChart").getContext("2d");

            const instructorsByCountryData = {
                labels: @json($instructorsByCountry->pluck('country')),
                datasets: [{
                    label: "Instructors",
                    data: @json($instructorsByCountry->pluck('total')),
                    backgroundColor: "rgba(75, 192, 192, 0.6)"
                }]
            };

            new Chart(instructorsByCountry, {
                type: "bar",
                data: instructorsByCountryData,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {display: false}
                    }
                }
            });
        });
    </script>

    {{--    registration codes analytics --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const usageCanvas = document.getElementById("usageChart");
            const usageOverTimeCanvas = document.getElementById("usageOverTimeChart");

            if (usageCanvas && usageOverTimeCanvas) {
                const usageCtx = usageCanvas.getContext("2d");
                new Chart(usageCtx, {
                    type: "bar",
                    data: {
                        labels: ["{{__("dashboard.codes-are-used")}}", "{{__("dashboard.codes-are-not-used")}}"],
                        datasets: [{
                            label: "{{__("dashboard.registration-code")}}",
                            data: [@json($usedCount), @json($notUsedCount)],
                            backgroundColor: ["rgba(75, 192, 192, 0.6)", "rgba(255, 99, 132, 0.6)"]
                        }]
                    },
                    options: {responsive: true}
                });

                const usageOverTimeCtx = usageOverTimeCanvas.getContext("2d");
                new Chart(usageOverTimeCtx, {
                    type: "line",
                    data: {
                        labels: @json($usageOverTime->pluck('date')),
                        datasets: [{
                            label: "{{__("dashboard.codes-are-used")}}",
                            data: @json($usageOverTime->pluck('total')),
                            borderColor: "rgba(75, 192, 192, 1)",
                            fill: false
                        }]
                    },
                    options: {responsive: true}
                });
            } else {
                console.error("Error: Could not find one or both canvas elements.");
            }
        });
    </script>

    {{--    Institutes have instructors --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const institutesHaveInstructors = document.getElementById("institutesHaveInstructorsChart").getContext("2d");

            new Chart(institutesHaveInstructors, {
                type: "bar",
                data: {
                    labels: @json($institutesHaveInstructors->pluck('name')),
                    datasets: [{
                        label: "{{__("dashboard.instructors")}}",
                        data: @json($institutesHaveInstructors->pluck('instructors_count')),
                        backgroundColor: "rgba(54, 162, 235, 0.6)",
                        borderColor: "rgba(54, 162, 235, 1)",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }
                }
            });
        });
    </script>

    {{--    Instructors analytics--}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const instructorsAnalytics = document.getElementById("instructorsPieChart").getContext("2d");

            new Chart(instructorsAnalytics, {
                type: "pie",
                data: {
                    labels: ["{{__("dashboard.teachers-affiliated-with-institutions")}}", "{{__("dashboard.freelancers")}}"],
                    datasets: [{
                        data: [@json($instructorsInInstitutes), @json($freelancers)],
                        backgroundColor: ["#36A2EB", "#FF6384"]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        });
    </script>
@endsection