@php
    $flat_colors = collect([
        "#b91d47",
      "#00aba9",
      "#2b5797",
      "#e8c3b9",
      "#1e7145"
    ]);
@endphp
<style>
    .main-box {
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 0 transparent, 0 0 transparent, 0 13px 19px #1c4c9f0f;
    }
</style>
<div class="col-12 p-0">
    <div class="col-12 row p-0 d-flex">
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Recent week's orders total amount
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="orders" style="width:100%;height:250px">
                    </canvas>
                </div>
            </div>
        </div>
{{--        <div class="col-12 col-lg-4 p-2">--}}
{{--            <div class="col-12 p-0 main-box">--}}
{{--                <div class="col-12 px-0">--}}
{{--                    <div class="col-12 px-3 py-3">--}}
{{--                        <div class="col-12 p-0">--}}
{{--                            <div class="col-12 p-0 row">--}}
{{--                                <div class="col-4">--}}
{{--                                    Visitor rate--}}
{{--                                </div>--}}
{{--                                <div class="col-8 d-flex justify-content-end align-items-center">--}}


{{--                                    <div class="spinner-grow text-info mx-2" role="status"--}}
{{--                                         style="width:15px;height: 15px">--}}
{{--                                        <span class="visually-hidden"></span>--}}
{{--                                    </div>--}}

{{--                                    <span style="font-weight: bold;"><a--}}
{{--                                            href="#">{{count($data['current_visitors'])}}</a></span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                    </div>--}}
{{--                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>--}}
{{--                </div>--}}
{{--                <div class="col-12 p-3">--}}
{{--                    <canvas id="traffics-chart" style="width:100%;height:250px">--}}
{{--                    </canvas>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Recent week's new members
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="new-users" style="width:100%;height:250px">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Top countries
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="ChartCountries" style="width:100%;height:250px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Members
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="ChartUsers" style="width:100%;max-height:250px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Browsers
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="ChartBrowsers" style="width:100%;max-height:250px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Operating systems
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="ChartOperatingSystems" style="width:100%;max-height:250px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Top devices
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <div class="col-12 p-3">
                    <canvas id="ChartDevices" style="width:100%;max-height:250px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8 p-2">
            <div class="col-12 p-0 main-box">
                <div class="col-12 px-0">
                    <div class="col-12 px-3 py-3">
                        Most viewed posts
                    </div>
                    <div class="col-12 " style="min-height: 1px;background: #f3f3f3;"></div>
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="col-12 p-3">
                    <!--begin::Table container-->
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                            <!--begin::Table head-->
                            <thead>
                            <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
                                <th class="p-0 pb-3 min-w-100px text-start">TITLE</th>
                                <th class="p-0 pb-3 min-w-50px text-center ">TYPE</th>
                                <th class="p-0 pb-3 min-w-50px text-center ">HITS</th>
                                <th class="p-0 pb-3 w-50px text-end">VIEW</th>
                            </tr>
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody>
                            @foreach($data['posts']['active_posts'] as $post)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="d-flex justify-content-start flex-column">
                                                <a href="{{\App\Helpers\Helper::handle_route('posts.index' , ['q' => $post->title])}}"
                                                   class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{$post?->title}}</a>
                                                <span
                                                    class="text-gray-400 fw-semibold d-block fs-7 text-capitalize">By: {{$post?->user?->name}}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center text-capitalize">
                                        {{$post->type}}
                                    </td>
                                    <td class="text-center text-capitalize">
                                        <span
                                            class="font-weight-bold">{{Helper::formatNumber($post->hits)}}</span>
                                        views
                                    </td>
                                    <td class="text-end">
                                        <a href="{{Helper::handle_route('posts.index' , ['q' => $post->title])}}"
                                           class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr001.svg-->
                                            <span class="svg-icon svg-icon-5 svg-icon-gray-700">
        																				<svg width="24" height="24"
                                                                                             viewBox="0 0 24 24"
                                                                                             fill="none"
                                                                                             xmlns="http://www.w3.org/2000/svg">
        																					<path
                                                                                                d="M14.4 11H3C2.4 11 2 11.4 2 12C2 12.6 2.4 13 3 13H14.4V11Z"
                                                                                                fill="currentColor"/>
        																					<path opacity="0.3"
                                                                                                  d="M14.4 20V4L21.7 11.3C22.1 11.7 22.1 12.3 21.7 12.7L14.4 20Z"
                                                                                                  fill="currentColor"/>
        																				</svg>
        																			</span>
                                            <!--end::Svg Icon-->
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!--end::Table-->
                </div>
                <!--end: Card Body-->
            </div>
            <!--end::Table widget 14-->
        </div>
    </div>

    @section('scripts')
        <script src="{{global_asset('assets/js/chartjs.min.js')}}"></script>
        <script type="text/javascript">

            new Chart(document.getElementById('orders').getContext('2d'), {
                type: 'line',
                data: {
                    labels: [
                        @foreach(array_reverse($data['orders']['days_list']) as $day)
                            "{{$day}}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'orders amount',
                        data: [
                            @foreach(array_reverse($data['orders']['amounts']) as $amount)
                                "{{$amount->total_amount ??  0}}",
                            @endforeach
                        ],
                        backgroundColor: "#00aba9",
                        borderColor: '#00aba9',
                        lineTension: '.15',
                        tension: 0.1,
                        fill: true,
                        pointStyle: "circle",
                        pointBorderColor: "#00aba9",
                        pointBackgroundColor: "#fff",
                        pointRadius: 4,
                        borderWidth: 3.5,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false,
                            labels: {
                                font: {
                                    size: 14,
                                }
                            }
                        }
                    },
                    scales: {

                        x: {
                            beginAtZero: false,
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            grid: {
                                display: true,
                                color: "rgb(3,169,244,0.05)"
                            }
                        },

                    },
                    hover: {
                        mode: 'index'
                    },
                    elements: {
                        line: {
                            tension: 1
                        }
                    }
                }
            });

            {{--new Chart(document.getElementById('traffics-chart').getContext('2d'), {--}}
            {{--    type: 'line',--}}
            {{--    data: {--}}
            {{--        labels: [--}}
            {{--            @foreach(array_reverse($data['traffics']) as $key => $value)--}}
            {{--                "{{$key}}",--}}
            {{--            @endforeach--}}
            {{--        ],--}}
            {{--        datasets: [{--}}
            {{--            label: '# Visitor rate',--}}
            {{--            data: [--}}
            {{--                @foreach(array_reverse($data['traffics']) as $key => $value)--}}
            {{--                    "{{Helper::formatNumber($value)}}",--}}
            {{--                @endforeach--}}
            {{--            ],--}}
            {{--            backgroundColor: "#00aba9",--}}
            {{--            borderColor: '#00aba9',--}}
            {{--            lineTension: '.15',--}}
            {{--            tension: 0.1,--}}
            {{--            fill: true,--}}
            {{--            pointStyle: "circle",--}}
            {{--            pointBorderColor: "#00aba9",--}}
            {{--            pointBackgroundColor: "#fff",--}}
            {{--            pointRadius: 4,--}}
            {{--            borderWidth: 3.5,--}}
            {{--        }]--}}
            {{--    },--}}
            {{--    options: {--}}
            {{--        responsive: true,--}}
            {{--        plugins: {--}}
            {{--            legend: {--}}
            {{--                display: false,--}}
            {{--                labels: {--}}
            {{--                    font: {--}}
            {{--                        size: 14,--}}
            {{--                    }--}}
            {{--                }--}}
            {{--            }--}}
            {{--        },--}}
            {{--        scales: {--}}

            {{--            x: {--}}
            {{--                beginAtZero: false,--}}
            {{--                grid: {--}}
            {{--                    display: false--}}
            {{--                }--}}
            {{--            },--}}
            {{--            y: {--}}
            {{--                grid: {--}}
            {{--                    display: true,--}}
            {{--                    color: "rgb(3,169,244,0.05)"--}}
            {{--                }--}}
            {{--            },--}}

            {{--        },--}}
            {{--        hover: {--}}
            {{--            mode: 'index'--}}
            {{--        },--}}
            {{--        elements: {--}}
            {{--            line: {--}}
            {{--                tension: 1--}}
            {{--            }--}}
            {{--        }--}}
            {{--    }--}}
            {{--});--}}

            new Chart(document.getElementById('new-users').getContext('2d'), {
                type: 'line',
                data: {
                    labels: [
                        @foreach(array_reverse($data['new_users']['days_list']) as $day)
                            "{{$day}}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'New members average',
                        data: [
                            @foreach(array_reverse($data['new_users']['counts_list']) as $count)
                                "{{Helper::formatNumber($count)}}",
                            @endforeach
                        ],
                        backgroundColor: "#00aba9",
                        borderColor: '#00aba9',
                        lineTension: '.15',
                        tension: 0.1,
                        fill: true,
                        pointStyle: "circle",
                        pointBorderColor: "#00aba9",
                        pointBackgroundColor: "#fff",
                        pointRadius: 4,
                        borderWidth: 3.5,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false,
                            labels: {
                                font: {
                                    size: 14,
                                }
                            }
                        }
                    },
                    scales: {

                        x: {
                            beginAtZero: false,
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            grid: {
                                display: true,
                                color: "rgb(3,169,244,0.05)"
                            }
                        },

                    },
                    hover: {
                        mode: 'index'
                    },
                    elements: {
                        line: {
                            tension: 1
                        }
                    }
                }
            });

            const ChartCountries = new Chart(document.getElementById('ChartCountries'), {
                type: 'bar',
                data: {
                    labels: [@foreach($data['top_countries'] as $country)
                        "{{$country->country_name}}",
                        @endforeach],
                    datasets: [{
                        label: 'Top countries',
                        backgroundColor: {!!json_encode($flat_colors) !!},
                        labels: [
                            @foreach($data['top_countries'] as $country)
                                "{{$country->country_name}}",
                            @endforeach
                        ],
                        data: [@foreach($data['top_countries'] as $country)
                            "{{Helper::formatNumber($country->count)}}",
                            @endforeach]
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false,
                        }
                    }
                }
            });

            const ChartUsers = new Chart(document.getElementById('ChartUsers'), {
                type: 'pie',
                data: {
                    labels: [
                        'active members', 'total members'
                    ],
                    datasets: [{
                        label: 'Members',
                        data: [
                            @foreach($data['active_users'] as $count)
                                "{{Helper::formatNumber($count)}}",
                            @endforeach
                        ],

                        backgroundColor: {!!json_encode($flat_colors) !!},
                        borderColor: [
                            'transparent',
                        ],
                        borderWidth: 0
                    }]
                }
            });
            const ChartBrowsers = new Chart(document.getElementById('ChartBrowsers'), {
                type: 'pie',
                data: {
                    labels: [
                        @foreach($data['top_browsers'] as $browser)
                            "{{$browser->browser}}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Browsers',
                        data: [
                            @foreach($data['top_browsers'] as $browser)
                                "{{Helper::formatNumber($browser->count)}}",
                            @endforeach
                        ],

                        backgroundColor: {!!json_encode($flat_colors) !!},
                        borderColor: [
                            'transparent',
                        ],
                        borderWidth: 0
                    }]
                }
            });
            const ChartOperatingSystems = new Chart(document.getElementById('ChartOperatingSystems'), {
                type: 'doughnut',
                data: {
                    labels: [
                        @foreach($data['top_operating_systems'] as $os)
                            "{{$os->operating_system}}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Operating Systems',
                        data: [
                            @foreach($data['top_operating_systems'] as $os)
                                "{{Helper::formatNumber($os->count)}}",
                            @endforeach
                        ],

                        backgroundColor: {!!json_encode($flat_colors) !!},
                        borderColor: [
                            'transparent',
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            const ChartDevices = new Chart(document.getElementById('ChartDevices'), {
                type: 'doughnut',
                data: {
                    labels: [
                        @foreach($data['top_devices'] as $device)
                            "{{$device->device}}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Devices',
                        data: [
                            @foreach($data['top_devices'] as $device)
                                "{{Helper::formatNumber($device->count)}}",
                            @endforeach
                        ],

                        backgroundColor: {!!json_encode($flat_colors) !!},
                        borderColor: [
                            'transparent',
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            document.addEventListener('DOMContentLoaded', function () {
                var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

                console.log(timezone);
                fetch('{{route('set.timezone')}}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({ timezone: timezone }),
                });
            });
        </script>
    @endsection
</div>