@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 disabled" 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="{{$weeksAxis}}" 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>

<div class="row">
    <div class="col-lg-12 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.visit_in_prev_year')}} ({{date('Y', strtotime($prevYearStart))}})</h6>
                <p>{{__('dashboard.year')}}: {{date('Y', strtotime($prevYearStart))}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    {{$prevYearVisitors}}
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.visit_in_year')}} ({{date('Y')}})</h6>
                <p>{{__('dashboard.year')}}: {{date('Y')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    {{$thisYearVisitors}}
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.visit_in_month')}} ({{date('F')}})</h6>
                <p>{{__('dashboard.month')}}: {{date('F')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">{{$thisMonthVisitors}}
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.visit_in_week')}} ({{date('W')}})</h6>
                <p>{{__('dashboard.week')}}: {{date('W')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    {{$thisWeekVisitors}}
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.visit_in_day')}} ({{date('l')}})</h6>
                <p>{{__('dashboard.day')}}: {{date('l')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    {{$thisDayVisitors}}
                </span>
            </div>
        </div>
    </div>

    @if(count($reservations))
        @foreach($reservations as $status => $reservation)
            <div class="col-lg-4 mb-3">
                <div class="new-users border-item">
                    <div class="datatitle">
                        <h6 class="text-uppercase font-weight-bold">{{__('reservations.'.$status.'_re')}}</h6>
                    </div>
                    <div class="items">
                        <span class="number text-primary">{{count($reservation)}}</span>
                    </div>
                </div>
            </div>
        @endforeach
    @endif

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.confirmed_re_count')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{$confirmedReSum}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.owed_amount')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{$confirmedReSum}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.platform_profit_percentage')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{$platformPercentage}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.users_counts')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{count($users['user'])}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.providers_counts')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{count($users['provider'])}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.halls_counts')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{$hallsCounts}}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('reservations.attendees_number')}}</h6>
            </div>
            <div class="items">
                <span class="number text-primary">{{$attendeesNumber}}</span>
            </div>
        </div>
    </div>

</div>
@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