@extends('layouts.admin', ['title' => 'Employment 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="{{route('employment.index')}}">Employment</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Overview</li>
                            </ol>
                        </nav>
                    </div>
                </div><!--end row-->

                <div class="row">
                    <div class="col-md-4">
                        <div class="card card-animate">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <p class="fw-medium text-muted mb-0">Total Employment records</p>
                                        <h2 class="mt-4 ff-secondary fw-semibold">
                                            <span class="counter-value" data-target="{{$employed}}"></span>
                                        </h2>

                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                    <div class="col-md-4">
                        <div class="card card-animate">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <p class="fw-medium text-muted mb-0">Participants with earnings</p>
                                        <h2 class="mt-4 ff-secondary fw-semibold">
                                            <span class="counter-value" data-target="{{$earned}}"></span>
                                        </h2>

                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                    <div class="col-md-4">
                        <div class="card card-animate">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <p class="fw-medium text-muted mb-0">Participants with consent forms</p>
                                        <h2 class="mt-4 ff-secondary fw-semibold">
                                            <span class="counter-value" data-target="{{$consented}}"></span>
                                        </h2>

                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                </div> {{--/. row --}}

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="col-md-10 col-12">
                                <div class="card-header d-none">
                                    <h5 class="card-title mb-0">Employment Overview</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="district_employment"></canvas>
                                        </div>
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="employment_rate"></canvas>
                                        </div>
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="earnings_rate"></canvas>
                                        </div>
                                        <div class="col-6" style="height: 500px;">
                                            <h6>Employment disaggregated by gender</h6>
                                            <canvas id="gender_employment"></canvas>
                                        </div>
                                        <div class="col-6" style="height: 500px;">
                                            <h6>Earnings disaggregated by gender</h6>
                                            <canvas id="gender_earnings"></canvas>
                                        </div>
                                        <div class="col-12" style="height: 500px;">
                                            <canvas id="district_earnings"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div>

            </div><!-- container-fluid -->
        </div>


        <!-- End Page-content -->


@endsection

        @push('scripts')
            <script>
                const employment_rate_data = {{Js::from($employment_rate)}};
                const earning_rate_data = {{Js::from($earning_rate)}};
                const district_employment_data = {{Js::from($employment_per_district)}};
                const gender_employment_data = {{Js::from($employment_per_gender)}};
                const gender_earnings_data = {{Js::from($earnings_per_gender)}};
                const district_earnings_data = {{Js::from($earnings_per_district)}};

                new Chart(
                    document.getElementById('employment_rate'),
                    {
                        type: 'line',
                        data: {
                            labels: employment_rate_data.labels,
                            datasets: [
                                {
                                    label: 'Employment Registration Rate',
                                    data: employment_rate_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('earnings_rate'),
                    {
                        type: 'line',
                        data: {
                            labels: earning_rate_data.labels,
                            datasets: [
                                {
                                    label: 'Earnings Registration Rate',
                                    data: earning_rate_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('district_employment'),
                    {
                        type: 'bar',
                        data: {
                            labels: district_employment_data.labels,
                            datasets: [
                                {
                                    label: 'Employment per District',
                                    data: district_employment_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('gender_employment'),
                    {
                        type: 'pie',
                        data: {
                            labels: gender_employment_data.labels,
                            datasets: [
                                {
                                    label: 'Gender employment distribution',
                                    data: gender_employment_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('gender_earnings'),
                    {
                        type: 'pie',
                        data: {
                            labels: gender_earnings_data.labels,
                            datasets: [
                                {
                                    label: 'Gender earnings distribution',
                                    data: gender_earnings_data.data
                                }
                            ]
                        }
                    }
                );

                new Chart(
                    document.getElementById('district_earnings'),
                    {
                        type: 'bar',
                        data: {
                            labels: district_earnings_data.labels,
                            datasets: [
                                {
                                    label: 'District earnings distribution',
                                    data: district_earnings_data.data
                                }
                            ]
                        }
                    }
                );
            </script>
        @endpush