@extends('themes.base.layout')
@section('title', trans('gallery.statistics.title'))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    <li class="breadcrumb-item active">@lang('gallery.statistics.title')</li>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>@lang('gallery.statistics.title')</h1>
                <div class="alert alert-info" style="margin-bottom: 30px;">
                    <i class="fa fa-fw fa-info"></i> @lang('gallery.statistics.intro', ['gallery_name' => UserConfig::get('app_name')])
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">@lang('gallery.statistics.cameras')</div>
                    <div class="card-body text-center" id="cameras-graph">
                        <canvas id="cameras-chart" style="display: none;"></canvas>
                        <img class="loading" src="{{ asset('ripple.svg') }}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- TODO: include ChartJS locally --}}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('{{ route('statistics.cameras') }}', function(result)
            {
                $('.loading', '#cameras-graph').hide();
                $('canvas', '#cameras-graph').show();
                var myPieChart = new Chart($('#cameras-chart'),
                {
                    type: 'pie',
                    data: {
                        datasets: [
                            {
                                backgroundColor: result.backgrounds,
                                data: result.data
                            }
                        ],
                        labels: result.labels
                    }
                });
            });
        });
    </script>
@endpush