@extends('Dashboard.layouts.master')
@section('title','Dashboard')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
            <div class="d-flex flex-column flex-column-fluid">
                <livewire:bread-crumb heading="{{__('translations.dashboard')}}" name_1="Home" name_2="{{__('translations.dashboard')}}" name_3="Statistics" />
                <div id="kt_app_content" class="app-content flex-column-fluid">
                    <div id="kt_app_content_container" class="app-container container-xxl">
                        <div class="row gy-5 g-xl-10">
                            <div class="col-sm-6 col-xl-3 mb-xl-10">
                                <div class="card h-lg-100">
                                    <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                        <div class="m-0">
                                            <i class="fa-solid fa-user-group text-primary"></i>
                                        </div>
                                        <div class="d-flex flex-column my-7">
                                            <div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$count_employers}}">0</div>
                                            <div class="m-0">
                                                <span class="fw-semibold fs-6 text-gray-500">{{__('translations.employers')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3 mb-xl-10">
                                <div class="card h-lg-100">
                                    <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                        <div class="m-0">
                                            <i class="fa-solid fa-people-roof text-primary"></i>
                                        </div>
                                        <div class="d-flex flex-column my-7">
                                            <div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$count_candidates}}">0</div>
                                            <div class="m-0">
                                                <span class="fw-semibold fs-6 text-gray-500">{{__('translations.candidates')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3 mb-xl-10">
                                <div class="card h-lg-100">
                                    <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                        <div class="m-0">
                                            <i class="fa-solid fa-desktop text-primary"></i>
                                        </div>
                                        <div class="d-flex flex-column my-7">
                                            <div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$count_jobs}}">0</div>
                                            <div class="m-0">
                                                <span class="fw-semibold fs-6 text-gray-500">{{__('translations.all_jobs')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3 mb-xl-10">
                                <div class="card h-lg-100">
                                    <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                        <div class="m-0">
                                            <i class="fa-solid fa-desktop text-primary"></i>
                                        </div>
                                        <div class="d-flex flex-column my-7">
                                            <div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$count_active_jobs}}">0</div>
                                            <div class="m-0">
                                                <span class="fw-semibold fs-6 text-gray-500">{{__('translations.active_jobs')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="kt_app_content" class="app-content flex-column-fluid">
                    <div id="kt_app_content_container" class="app-container container-xxl">
                        <div class="row gy-5 g-xl-10">
                            <div class="col-sm-6 col-xl-6 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.most_viewed_jobs')}}</span>
                                        </h3>
                                    </div>
                                    <div class="card-body py-3">
                                        <div class="table-responsive">
                                            <table class="table table-row-dashed align-middle gs-0 gy-4">
                                                <thead>
                                                    <tr class="fs-7 fw-bold border-0 text-gray-500">
                                                        <th class="min-w-150px" colspan="2">{{__('forms.title')}}</th>
                                                        <th class="min-w-150px text-end pe-0" colspan="2">{{__('translations.total_hits')}}</th>
                                                        <th class="text-end min-w-150px" colspan="2">{{__('translations.creation_date')}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($most_viewed_jobs as $job)
                                                    <tr>
                                                        <td class="" colspan="2">
                                                            <a href="{{route('jobs.edit',$job->id)}}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{$job->getTranslations($main_lang->id, 'name')}}</a>
                                                            <span class="text-primary min-w-50px d-block">{{$job->employer?->company_name}}</span>
                                                        </td>
                                                        <td class="pe-0" colspan="2">
                                                            <div class="d-flex justify-content-end">
                                                                <span class="text-danger min-w-50px d-block text-end fw-bold fs-6">{{$job->h}}</span>
                                                            </div>
                                                        </td>
                                                        <td class="" colspan="2">
                                                            <div class="d-flex justify-content-end">
                                                                <span class="text-gray-900 fw-bold fs-6 me-3">{{\Carbon\Carbon::parse($job->created_at)->format('Y-m-d H:i')}} </span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-6 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.most_applied_jobs')}}</span>
                                        </h3>
                                    </div>
                                    <div class="card-body py-3">
                                        <div class="table-responsive">
                                            <table class="table table-row-dashed align-middle gs-0 gy-4">
                                                <thead>
                                                    <tr class="fs-7 fw-bold border-0 text-gray-500">
                                                        <th class="min-w-150px" colspan="2">{{__('forms.title')}}</th>
                                                        <th class="min-w-150px text-end pe-0" colspan="2">{{__('translations.total_applications')}}</th>
                                                        <th class="text-end min-w-150px" colspan="2">{{__('translations.creation_date')}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($most_applied_jobs as $job)
                                                    <tr>
                                                        <td class="" colspan="2">
                                                            <a href="{{route('jobs.edit',$job->id)}}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{$job->getTranslations($main_lang->id, 'name')}}</a>
                                                            <span class="text-primary min-w-50px d-block">{{$job->employer?->company_name}}</span>
                                                        </td>
                                                        <td class="pe-0" colspan="2">
                                                            <div class="d-flex justify-content-end">
                                                                <span class="text-danger min-w-50px d-block text-end fw-bold fs-6">{{$job->h}}</span>
                                                            </div>
                                                        </td>
                                                        <td class="" colspan="2">
                                                            <div class="d-flex justify-content-end">
                                                                <span class="text-gray-900 fw-bold fs-6 me-3">{{\Carbon\Carbon::parse($job->created_at)->format('Y-m-d H:i')}} </span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-6 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.top_job_posters')}}</span>
                                        </h3>
                                    </div>
                                    <div class="card-body py-3">
                                        <div class="table-responsive">
                                            <table class="table table-row-dashed align-middle gs-0 gy-4">
                                                <thead>
                                                    <tr class="fs-7 fw-bold border-0 text-gray-500">
                                                        <th class="min-w-150px" colspan="2">{{__('forms.title')}}</th>
                                                        <th class="min-w-150px text-end pe-0" colspan="2">{{__('translations.total_jobs')}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($top_employers as $employer)
                                                    <tr>
                                                        <td class="" colspan="2">
                                                            <a href="{{route('employers.edit',$employer->id)}}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{$employer?->company_name}}</a>
                                                        </td>
                                                        <td class="pe-0" colspan="2">
                                                            <div class="d-flex justify-content-end">
                                                                <span class="text-success min-w-50px d-block text-end fw-bold fs-6">{{$employer->h}}</span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-12 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.top_job_posters')}}</span>
                                        </h3>
                                        <div id="topJobPoster" style="width: 100%; height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-12 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.number_employers_month')}}</span>
                                        </h3>
                                        <div id="monthly_employers" style="width: 100%; height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-12 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.number_candidates_month')}}</span>
                                        </h3>
                                        <div id="monthly_candidates" style="width: 100%; height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-12 mb-xl-10">
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-gray-800">{{__('translations.number_candidates_month')}}</span>
                                        </h3>
                                        <div id="count_feedback" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        am5.ready(function() {
            var root = am5.Root.new("topJobPoster");
            root.setThemes([am5themes_Animated.new(root)]);

            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "pan",
                wheelY: "zoom",
                cursor: am5xy.XYCursor.new(root, {})
            }));

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "jobMonthName",
                renderer: am5xy.AxisRendererX.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                name: "Jobs",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "totalSum",
                categoryXField: "jobMonthName",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            series.columns.template.setAll({
                fill: am5.color("#6699CC"),
                stroke: am5.color("#6699CC")
            });

            root._logo.dispose();

            series.data.setAll(@json($monthly_jobs));
            xAxis.data.setAll(@json($monthly_jobs));

        });
    </script>
    <script>
        am5.ready(function() {
            var root = am5.Root.new("monthly_employers");
            root.setThemes([am5themes_Animated.new(root)]);

            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "pan",
                wheelY: "zoom",
                cursor: am5xy.XYCursor.new(root, {})
            }));

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "userMonthName",
                renderer: am5xy.AxisRendererX.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                name: "Employers",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "totalSum",
                categoryXField: "userMonthName",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            series.columns.template.setAll({
                fill: am5.color("#B19CD9"),
                stroke: am5.color("#B19CD9")
            });


            root._logo.dispose();
            series.data.setAll(@json($monthly_employers));
            xAxis.data.setAll(@json($monthly_employers));

        });
    </script>
    <script>
        am5.ready(function() {
            var root = am5.Root.new("monthly_candidates");
            root.setThemes([am5themes_Animated.new(root)]);

            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "pan",
                wheelY: "zoom",
                cursor: am5xy.XYCursor.new(root, {})
            }));

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "userMonthName",
                renderer: am5xy.AxisRendererX.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {}),
                tooltip: am5.Tooltip.new(root, {})
            }));

            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                name: "Employers",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "totalSum",
                categoryXField: "userMonthName",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            root._logo.dispose();
            series.data.setAll(@json($monthly_candidates));
            xAxis.data.setAll(@json($monthly_candidates));

        });
    </script>
    <script>
        am5.ready(function() {
            var root = am5.Root.new("count_feedback");
            root.setThemes([am5themes_Animated.new(root)]);

            var chart = root.container.children.push(am5percent.PieChart.new(root, {
                layout: root.verticalLayout
            }));

            var series = chart.series.push(am5percent.PieSeries.new(root, {
                valueField: "totalCount",
                categoryField: "feedback"
            }));

            series.labels.template.setAll({
                text: "{category}: {value} %"
            });

            series.slices.template.setAll({
                strokeWidth: 2,
                stroke: am5.color("#ffffff")
            });
            root._logo.dispose();
            series.data.setAll(@json($count_feedback));
            series.appear(1000, 100);
        });
    </script>
@endsection