@extends('layouts.admin', ['title' => 'Training Overview'])

@push('stylesheets')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/dual-listbox/dist/dual-listbox.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{asset('assets/css/lightbox.min.css')}}">

@endpush

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

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{url('/training')}}">Training</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Overview</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="col-md-10 col-12">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Training Overview</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="district_training"></canvas>
                                        </div>
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="training_rate"></canvas>
                                        </div>
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="module_sessions"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </div>


        <!-- End Page-content -->


@endsection

        @push('scripts')
            <script>
                const training_rate_data = {{Js::from($training_rate)}};
                const district_sessions_data = {{Js::from($sessions_per_district)}};
                const module_sessions_data = {{Js::from($sessions_per_module)}};

                new Chart(
                    document.getElementById('training_rate'),
                    {
                        type: 'line',
                        data: {
                            labels: training_rate_data.labels,
                            datasets: [
                                {
                                    label: 'Training Rate',
                                    data: training_rate_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('district_training'),
                    {
                        type: 'bar',
                        data: {
                            labels: district_sessions_data.labels,
                            datasets: [
                                {
                                    label: 'Training Sessions per District',
                                    data: district_sessions_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('module_sessions'),
                    {
                        type: 'bar',
                        data: {
                            labels: module_sessions_data.labels,
                            datasets: [
                                {
                                    label: 'Training Sessions per Module',
                                    data: module_sessions_data.data
                                }
                            ]
                        }
                    }
                );
            </script>
        @endpush