@extends('admin.layouts.container')

@section('content')
    <!-- ------------ charts ------------- -->
    <div class="charts_container">
        <div class="row">
            {{-- Year chart--}}
            <div class="col-lg-12">
                <div class="chart_box">
                    <div class="chart_head mb-4">
                        <div class="row">
                            <div class="col-lg-12 d-flex justify-content-{{getCurrentLocale() == 'ar' ? 'start' : 'end'}}">
                                <h5> {{__('dashboard.visits_in')}} </h5>
                            </div>
                            <div class="col-lg-12 d-flex align-items-center">
                                <a data-axis="{{$yearsAxis}}" data-data="{{$yearsData}}" data-color="#27a444" class="btn last_7_years chart_links d-flex align-items-center" href="#0"><i class="fa fa-circle text-success"></i> <p>{{__('dashboard.last_7_years')}} </p></a>
                                <a data-axis="{{$monthsAxis}}" data-data="{{$monthsData}}" data-color="#3abad6" class="btn last_7_months chart_links d-flex align-items-center" href="#0"><i class="fa fa-circle text-primary"></i> <p>{{__('dashboard.last_7_months')}} </p></a>
                                <a data-axis="[]" data-data="{{$weeksData}}" data-color="#ffc107" class="btn last_7_weeks chart_links d-flex align-items-center" href="#0"><i class="fa fa-circle text-warning"></i> <p>{{__('dashboard.last_7_weeks')}}</p></a>
                                <a class="all_chart d-flex align-items-center mr-5" href="#0"><i class="fa fa-circle text-secondary"></i> <p>{{__('dashboard.all_chart')}}</p></a>
                            </div>

                        </div>
                    </div>
                    <div id="line_chart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- ------------ general-report ------------- -->
    <section class="general-report mt-5">
        <div class="row">
            <div class="col-lg-3">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-warning m-0">
                            <i class="bi bi-bag-check"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__('careers.head')}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{$careers}}</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-warning m-0">
                            <i class="bi bi-bag-check"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__('careerApplications.head')}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{$careerApplications}}</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="bi bi-person"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__('doctors.head')}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{$doctors}}</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="items">
                    <div class="top mb-3">
                        <span class="icon alert alert-info m-0">
                            <i class="bi bi-person"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>{{__('directors.head')}}</p>
                            <h2 class="counter mb-0 mt-1 fnt_rpt">{{$directors}}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- -------------- tables ----------------- -->
@endsection

@section('inner_js')

<!--------- new scripts ----------->

<script src="{{asset('assets/admin/js/lib/Chart.min.js')}}"></script>
<!-- ------- apex chart -------------- -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- ------- data table  -------------- -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<!-- ----------- datepicker ----------- -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<!-- ---------- charts ---------- -->

    <script>

        let yearContainer = $('.last_7_years'),
            monthContainer = $('.last_7_months'),
            weekContainer = $('.last_7_weeks');

        let yearData = yearContainer.data('data'),
            yearAxis = yearContainer.data('axis'),

            monthData = monthContainer.data('data'),
            monthAxis = weekContainer.data('axis'),

            weekData = weekContainer.data('data'),
            weekAxis = weekContainer.data('axis'),

            yearName = yearContainer.children('p').html(),
            monthName = monthContainer.children('p').html(),
            weekName = weekContainer.children('p').html();


        let line_chart_options = {
            series: [
                {name: yearName, data: yearData},
                {name: monthName, data: monthData},
                {name: weekName, data: weekData},
            ],
            colors: ['#27a444', '#3abad6', '#ffc107'],
            chart: {
                height: 350,
                type: 'area',
                // events:{
                //     legendClick: function (chartContext, seriesIndex, config) {
                //         if(seriesIndex === 0){
                //             chart.updateOptions({
                //                 xaxis: {
                //                     categories: yearAxis,
                //                 },
                //             });
                //         }
                //         if(seriesIndex === 1){
                //             chart.updateOptions({
                //                 xaxis: {
                //                     categories: monthAxis,
                //                 },
                //             });
                //         }
                //         if(seriesIndex === 2){
                //             chart.updateOptions({
                //                 xaxis: {
                //                     categories: weekAxis,
                //                 },
                //             });
                //         }
                //     }
                // }

            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                categories: yearAxis,
            },
            legend: {
                show: false,
                // position: 'top',
                // horizontalAlign: 'right',
                // offsetX: -10
            },
            tooltip: {
                x: {
                    format: 'dd/MM/yy HH:mm',
                },
            },
        };

        let chartSelector = document.querySelector("#line_chart");
        let chart = new ApexCharts(chartSelector, line_chart_options);

        chart.render();

        $('.all_chart').click(function (e) {
            e.preventDefault();
            $('.chart_links').removeClass('disabled');
            $('#line_chart').html('');
            let chartSelector = document.querySelector("#line_chart");
            let chart = new ApexCharts(chartSelector, line_chart_options);
            chart.render();
        });

        $('.chart_links').click(function (e) {
            $('#line_chart').html('');
            e.preventDefault();

            $(this).addClass('disabled');
            $(this).siblings('a').removeClass('disabled');

            let axis = $(this).data('axis'),
                data = $(this).data('data'),
                name = $(this).children('p').html(),
                color = $(this).data('color');

            chart.updateOptions({
                xaxis: {
                    categories: axis,
                },
                series: [{name: name, data: data}],
                colors: [color],
            });
        });


    </script>

@endsection