@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.canvasjs.min.js') }}"></script>
    <script type="text/javascript">
        $.post(null, null, function(response) {
            var hits = [],
                hosts = [],
                google_indexing = [],
                yandex_indexing = [],
                tic = [],
                links = [];

            $.each(response, function() {
                var created_at = moment(this.created_at).toDate();
                hits.push({
                    x: created_at,
                    y: this.hits
                });
                hosts.push({
                    x: created_at,
                    y: this.hosts
                });
                google_indexing.push({
                    x: created_at,
                    y: this.google_indexing
                });
                yandex_indexing.push({
                    x: created_at,
                    y: this.yandex_indexing
                });
                tic.push({
                    x: created_at,
                    y: this.tic
                });
                links.push({
                    x: created_at,
                    y: this.links
                });
            });

            $('.visits').CanvasJSChart({
                exportEnabled: true,
                animationEnabled: true,
                zoomEnabled: true,
                title:{
                    text: "Посещения"
                },
                axisY: {
                    title: "Хиты",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC",
                    includeZero: false
                },
                axisY2: {
                    title: "Хосты",
                    titleFontColor: "#C0504E",
                    lineColor: "#C0504E",
                    labelFontColor: "#C0504E",
                    tickColor: "#C0504E",
                    includeZero: false
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer"
                },
                data: [{
                    type: "spline",
                    name: "Хиты",
                    showInLegend: true,
                    dataPoints: hits
                },
                    {
                        type: "spline",
                        name: "Хосты",
                        axisYType: "secondary",
                        showInLegend: true,
                        dataPoints: hosts
                    }]
            });


            $('.indexing').CanvasJSChart({
                exportEnabled: true,
                animationEnabled: true,
                zoomEnabled: true,
                title:{
                    text: "Индексация"
                },
                axisY: {
                    title: "Google",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC",
                    includeZero: false
                },
                axisY2: {
                    title: "Yandex",
                    titleFontColor: "#C0504E",
                    lineColor: "#C0504E",
                    labelFontColor: "#C0504E",
                    tickColor: "#C0504E",
                    includeZero: false
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer"
                },
                data: [{
                    type: "spline",
                    name: "Google",
                    showInLegend: true,
                    dataPoints: google_indexing
                },
                    {
                        type: "spline",
                        name: "Yandex",
                        axisYType: "secondary",
                        showInLegend: true,
                        dataPoints: yandex_indexing
                    }]
            });

            $('.tic').CanvasJSChart({
                exportEnabled: true,
                animationEnabled: true,
                zoomEnabled: true,
                title:{
                    text: "Изменение ТИЦ"
                },
                axisY: {
                    title: "ТИЦ",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC",
                    includeZero: false
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer"
                },
                data: [{
                    type: "spline",
                    name: "ТИЦ",
                    showInLegend: true,
                    dataPoints: tic
                }]
            });

            $('.links').CanvasJSChart({
                exportEnabled: true,
                animationEnabled: true,
                zoomEnabled: true,
                title:{
                    text: "Количество внешних ссылок на сайт"
                },
                axisY: {
                    title: "Ссылки",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC",
                    includeZero: false
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer"
                },
                data: [{
                    type: "spline",
                    name: "Ссылки",
                    showInLegend: true,
                    dataPoints: links
                }]
            });
        });


    </script>
@endpush

@section('content')
    <p><strong>Последнее обновление:</strong> {{ is_null($item->last_update) ? 'никогда' : $item->last_update->format('d.m.Y H:i') }}.</p>
    <div class="visits chart" style="height: 370px; width: 100%;"></div>
    <div class="indexing chart" style="height: 370px; width: 100%;"></div>
    <div class="tic chart" style="height: 370px; width: 100%;"></div>
    <div class="links chart" style="height: 370px; width: 100%;"></div>
@endsection