@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 mb-3">
                    <i class="fa fa-fw fa-info"></i> @lang('gallery.statistics.intro', ['gallery_name' => UserConfig::get('app_name')])
                </div>

                @can('admin:configure')
                    <div class="card mb-3">
                        <div class="card-body">
                            <p>@lang('admin.statistics_enable_public_intro')</p>
                            <form method="post" action="{{ route('admin.statistics.save') }}">
                                {{ csrf_field() }}
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" name="enable_public_statistics" @if (UserConfig::get('public_statistics')) checked="checked"@endif/>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">@lang('admin.statistics_enable_public_checkbox')</span>
                                </label><br/>
                                <button class="btn btn-success"><i class="fa fa-floppy-o"></i> @lang('forms.save_action')</button>
                            </form>
                        </div>
                    </div>
                @endcan
            </div>
        </div>

        <div class="row">
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-header">@lang('gallery.statistics.photos_combined.chart_title')</div>
                    <div class="card-body text-center" id="taken-12m-graph">
                        <canvas id="taken-12m-chart" style="display: none;"></canvas>
                        <img class="loading" src="{{ asset('ripple.svg') }}"/>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">@lang('gallery.statistics.numbers.chart_title')</div>
                    <div class="card-body text-center" style="padding: 0;">
                        <table class="table table-striped stats-table mb-0">
                            <tbody>
                                <tr>
                                    <td class="icon-col"><i class="fa fa-photo"></i></td>
                                    <td class="stat-col">{{ number_format($photo_count, 0) }}</td>
                                    <td class="text-col">{{ trans_choice('gallery.statistics.numbers.photos', $photo_count) }}</td>
                                </tr>
                                <tr>
                                    <td class="icon-col"><i class="fa fa-book"></i></td>
                                    <td class="stat-col">{{ number_format($album_count, 0) }}</td>
                                    <td class="text-col">{{ trans_choice('gallery.statistics.numbers.albums', $album_count) }}</td>
                                </tr>
                                <tr>
                                    <td class="icon-col"><i class="fa fa-tags"></i></td>
                                    <td class="stat-col">{{ number_format($label_count, 0) }}</td>
                                    <td class="text-col">{{ trans_choice('gallery.statistics.numbers.labels', $label_count) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <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 class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">@lang('gallery.statistics.file_sizes')</div>
                    <div class="card-body text-center" id="filesizes-graph">
                        <canvas id="filesizes-chart" style="display: none;"></canvas>
                        <img class="loading" src="{{ asset('ripple.svg') }}"/>
                    </div>
                </div>
            </div>
        </div>

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

            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">@lang('gallery.statistics.album_by_size')</div>
                    <div class="card-body text-center" id="album-size-graph">
                        <canvas id="album-size-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() {
            /* Photos taken in the last 12 months */
            $.get('{{ route('statistics.photosCombined') }}', function(result)
            {
                $('.loading', '#taken-12m-graph').hide();
                $('canvas', '#taken-12m-graph').show();
                var myLineChart = new Chart($('#taken-12m-chart'),
                    {
                        type: 'line',
                        data: {
                            datasets: [
                                {
                                    borderColor: '#5f6cd9',
                                    data: result.data[0].values,
                                    fill: false,
                                    label: result.data[0].label
                                },
                                {
                                    borderColor: '#59c669',
                                    data: result.data[1].values,
                                    fill: false,
                                    label: result.data[1].label
                                }
                            ],
                            labels: result.labels
                        },
                        options: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    });
            });

            /* Cameras */
            $.get('{{ route('statistics.cameras') }}', function(result)
            {
                $('.loading', '#cameras-graph').hide();
                $('canvas', '#cameras-graph').show();
                var myPieChart = new Chart($('#cameras-chart'),
                {
                    type: 'doughnut',
                    data: {
                        datasets: [
                            {
                                backgroundColor: result.backgrounds,
                                data: result.data
                            }
                        ],
                        labels: result.labels
                    },
                    options: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    }
                });
            });

            /* File Sizes */
            $.get('{{ route('statistics.fileSizes') }}', function(result)
            {
                $('.loading', '#filesizes-graph').hide();
                $('canvas', '#filesizes-graph').show();
                var myPieChart = new Chart($('#filesizes-chart'),
                    {
                        type: 'doughnut',
                        data: {
                            datasets: [
                                {
                                    backgroundColor: result.backgrounds,
                                    data: result.data
                                }
                            ],
                            labels: result.labels
                        },
                        options: {
                            legend: {
                                display: true,
                                position: 'bottom'
                            }
                        }
                    });
            });

            /* Album size by photo count */
            $.get('{{ route('statistics.albumSizePhotos') }}', function(result)
            {
                $('.loading', '#album-photos-graph').hide();
                $('canvas', '#album-photos-graph').show();
                var myPieChart = new Chart($('#album-photos-chart'),
                    {
                        type: 'doughnut',
                        data: {
                            datasets: [
                                {
                                    backgroundColor: result.backgrounds,
                                    data: result.data
                                }
                            ],
                            labels: result.labels
                        },
                        options: {
                            legend: {
                                display: true,
                                position: 'bottom'
                            }
                        }
                    });
            });

            /* Album size by photo size */
            $.get('{{ route('statistics.albumSizePhotoSize') }}', function(result)
            {
                $('.loading', '#album-size-graph').hide();
                $('canvas', '#album-size-graph').show();
                var myPieChart = new Chart($('#album-size-chart'),
                    {
                        type: 'doughnut',
                        data: {
                            datasets: [
                                {
                                    backgroundColor: result.backgrounds,
                                    data: result.data
                                }
                            ],
                            labels: result.labels
                        },
                        options: {
                            legend: {
                                display: true,
                                position: 'bottom'
                            }
                        }
                    });
            });
        });
    </script>
@endpush