@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')

@endpush
@section('content')
{{--    <div class="card mt-3">--}}
{{--        <div class="card-body">--}}
{{--            --}}{{-- Start: Page Content --}}
{{--            <div class="d-flex justify-content-between">--}}
{{--                <div>--}}
{{--                    <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>--}}
{{--                    <div class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <hr>--}}
{{--        </div>--}}
{{--    </div>--}}
    <div class="row">
        {{--Right Side--}}
        <div class="col-md-12">
            <div class="card mt-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-md-3 col-sm-6 mb-3 mb-sm-0">
                                    <div class="border-start border-start-4 border-start-info px-3 bg-dashboard-info h-100"><small class="text-medium-emphasis">Jobs</small>
                                        <div class="fs-5 fw-semibold">{{(!empty($jobs) ? count($jobs) : 0)}}</div>
                                        @if(count($jobs) > 0)
                                            <a href="{{route('manager.jobs.index')}}" class="text-decoration-none text-dark" target="_blank">
                                                <span>more</span> <span style="letter-spacing: -5px">>></span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <!-- /.col-->
                                <div class="col-md-3 col-sm-6 mb-3 mb-md-0">
                                    <div class="border-start border-start-4 border-start-danger px-3 bg-dashboard-danger h-100"><small class="text-medium-emphasis">Applicants</small>
                                        <div class="fs-5 fw-semibold">{{(!empty($applicants) ? count($applicants) : 0)}}</div>
                                        @if(count($applicants) > 0)
                                            <a href="{{route('manager.applicants.index')}}" class="text-decoration-none text-dark" target="_blank">
                                                <span>more</span> <span style="letter-spacing: -5px">>></span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <!-- /.col-->
                                <div class="col-md-3 col-sm-6 mb-3 mb-sm-0">
                                    <div class="border-start border-start-4 border-start-warning px-3 bg-dashboard-warning h-100"><small class="text-medium-emphasis">Applications</small>
                                        <div class="fs-5 fw-semibold">{{(!empty($applications) ? count($applications) : 0)}}</div>
                                        @if(count($applications) > 0)
                                            <a href="{{route('manager.applications.index')}}" class="text-decoration-none text-dark" target="_blank">
                                                <span>more</span> <span style="letter-spacing: -5px">>></span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <!-- /.col-->
                                <div class="col-md-3 col-sm-6 mb-3 mb-sm-0">
                                    <div class="border-start border-start-4 border-start-success px-3 bg-dashboard-success h-100"><small class="text-medium-emphasis">Interviews</small>
                                        <div class="fs-5 fw-semibold">{{(!empty($interviews) ? count($interviews) : 0)}}</div>
                                        @if(count($interviews) > 0)
                                            <a href="{{route('manager.interviews.index')}}" class="text-decoration-none text-dark" target="_blank">
                                                <span>more</span> <span style="letter-spacing: -5px">>></span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.col-->
                    </div>
                </div>
            </div>
            {{--Graphs--}}
            <div class="row my-3">
                {{--Gender Chart--}}
                @if(count($genderChart) > 0)
                    <div class="col-md-4 mb-md-0 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <canvas id="genderChart"></canvas>
                            </div>
                        </div>
                    </div>
                @endif
                {{--Status Chart--}}
                @if(count($monthlyChart) > 0)
                    <div class="col-md-8 mb-md-0 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <canvas id="InterviewStatusChart"></canvas>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script src="{{asset('manager/chart/chart.js')}}"></script>
    <script>
        $(document).ready(function (){
            //Gender Chart
            var genderLabels = [];
            var genderDataSets = [];
            let genderLabel='';
            let genderDataSet='';
            @foreach($genderChart as $chart)
                genderLabel = '{{!empty($chart->gender) ? $chart->gender : 0}}';
            genderDataSet = '{{!empty($chart->applicants) ? $chart->applicants : 0}}';
            genderLabels.push(genderLabel);
            genderDataSets.push(genderDataSet);
            @endforeach
            const genderData = {
                labels: genderLabels,
                datasets: [
                    {
                        data: genderDataSets,
                    }
                ]
            };
            const genderConfig = {
                type: 'pie',
                data: genderData,
                options: {
                    maintainAspectRatio:false,
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Gender'
                        }
                    }
                },
            };
            var genderChart = document.getElementById("genderChart");
            new Chart(genderChart, genderConfig);

            //Interview Status Chart
            const data = {
                labels: [],
                datasets: []
            };
            const config = {
                type: 'line',
                data: data,
                options: {
                    maintainAspectRatio:true,
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Applications'
                        }
                    }
                },
            };
            var ctx = document.getElementById("InterviewStatusChart");
            var chart = new Chart(ctx, config);
            //Empty Arrays
            var labels = [];
            var datasets = [];
            //Loop Data
            @foreach($monthlyChart as $status)
            labels.push('{{$status['month']}}');
            datasets.push('{{$status['total']}}')
            @endforeach
            //
            var dataObj = [
                {
                    label: 'Applications',
                    data: datasets
                }
            ]
            let chartData = {
                labels: labels,
                datasets: dataObj
            }
            chart.data.labels = chartData.labels
            chart.data.datasets = chartData.datasets
            chart.update()

        })
    </script>
@endpush