@extends('layouts.app')

@section('content')

@component('shared.breadcrumbs')
    @slot('breadcrumbs')
        <ul>
            <li><a href="{{ route('home') }}">{{ __('Dashboard') }}</a></li>
        </ul>
    @endslot
@endcomponent

<main class="main-content">
    <div class="container">
        <div class="row">
            <div class="col">
                @if(auth()->user()->isSuperAdmin())
                <h1 class="text-center my-5">{{ __('You are logged in as super admin') }}</h1>
                @else
                <div class="row mb-2">
                    <div class="col-8 d-flex align-items-end">
                        <h4 class="mb-0">{{ __('Dashboard') }}</h4>
                    </div>
                    <div class="col-4">
                        <input type="text" name="daterange" value="" class="form-control float-right" />
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        <div class="chart-container" style="position: relative; width: 100%">
                            <canvas id="graph-chart"></canvas>
                        </div>
                    </div>
                </div>

                <h4 class="mt-4">{{ __('Modules') }}</h4>
                <div class="card">
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>{{ __('Date') }}</th>
                                    <th>{{ __('Time') }}</th>
                                    <th>{{ __('Module') }}</th>
                                    <th>{{ __('Hours') }}</th>
                                    <th class="text-right">{{ __('Earned') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($list as $module)
                                <tr>
                                    <td>
                                        {{ Carbon\Carbon::parse($module['start'])->format('d. M Y') }}
                                    </td>
                                    <td>
                                        {{ Carbon\Carbon::parse($module['start'])->format('H:i') }} - {{ Carbon\Carbon::parse($module['end'])->format('H:i') }}
                                    </td>
                                    <td>{{ $module['module'] }}</td>
                                    <td>{{ $module['hours'] }}</td>
                                    <td class="text-right">
                                        DKK {{ $module['earned'] }}
                                    </td>
                                </tr>
                                @endforeach
                                <tr>
                                    <td colspan="3" class="border-top">{{ __('Subtotal') }}</td>
                                    <td class="border-top">{{ $list->sum('hours') }}</td>
                                    <td class="border-top text-right">DKK {{ $list->sum('earned') }}</td>
                                </tr>
                                <tr>
                                    <td colspan="3">{{ __('ReadyGoDrive provision') }}</td>
                                    <td></td>
                                    <td class="text-right">DKK -{{ $list->sum('commission') }}</td>
                                </tr>
                                <tr>
                                    <td colspan="3"><strong>{{ __('Total') }}</strong></td>
                                    <td></td>
                                    <td class="text-right"><strong>DKK {{ $list->sum('earned') - $list->sum('commission') }}</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <h4 class="mt-5">{{ __('Summary') }}</h4>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="chart-container" style="position: relative; width: 100%">
                                    <canvas id="summary-chart1"></canvas>
                                    <div style="position: absolute; left: 46%; top: 49%; text-align: center">
                                        <div>{{ $summary['hours'] }}</div>
                                        {{ __('Hours') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="chart-container" style="position: relative; width: 100%">
                                    <canvas id="summary-chart2"></canvas>
                                    <div style="position: absolute; left: 45%; top: 49%; text-align: center">
                                        <div>DKK {{ $summary['earned'] }}</div>
                                        {{ __('Earned') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</main>
@endsection

@section('footer')
<script>
Chart.defaults.global.defaultFontFamily = 'Open Sans';

var myChart = new Chart(document.getElementById('graph-chart').getContext('2d'), {
    type: 'bar',
    responsive: true,
    data: {
        labels: [{!! $graph->keys()->map(function($item){ return "'".Carbon\Carbon::createFromFormat('Y-m-d', $item)->format('d/M')."'"; })->implode(',') !!}],
        datasets: [{
            label: '{{ __('Driving lessons (hours)') }}',
            data: [ {!! $graph->values()->map(function($item){ return $item['driving']['hours']; })->implode(',') !!} ],
            backgroundColor: 'rgba(255, 99, 132, 0.8)',
            borderWidth: 0
        }, {
            label: '{{ __('Theory lessons (hours)') }}',
            data: [ {!! $graph->values()->map(function($item){ return $item['theory']['hours']; })->implode(',') !!} ],
            backgroundColor: 'rgba(54, 162, 235, 0.8)',
            borderWidth: 0
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        }
    }
});

var myDoughnutChart1 = new Chart(document.getElementById('summary-chart1').getContext('2d'), {
    type: 'doughnut',
    data: {
        datasets: [
            {
                data: [ {{ $summary['theory']['hours'] }}, {{ $summary['driving']['hours'] }} ],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ]
            }

        ],
        labels: [
            '{{ __('Theory') }}', '{{ __('Driving') }}'
        ]
    }
});

var myDoughnutChart2 = new Chart(document.getElementById('summary-chart2').getContext('2d'), {
    type: 'doughnut',
    data: {
        datasets: [
            {
                data: [ {{ $summary['theory']['earned'] }}, {{ $summary['driving']['earned'] }} ],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ]
            }

        ],
        labels: [
            '{{ __('Theory') }}', '{{ __('Driving') }}'
        ]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data){
                    return data.labels[tooltipItem.index] + ': DKK ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                }
            }
        }
    }
});
</script>

<script>
$(function() {
    $('input[name="daterange"]').daterangepicker({
        ranges: {
            '{{ __('Today') }}': [moment(), moment()],
            '{{ __('Yesterday') }}': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '{{ __('Last 7 Days') }}': [moment().subtract(6, 'days'), moment()],
            '{{ __('Last 30 Days') }}': [moment().subtract(29, 'days'), moment()],
            '{{ __('This Month') }}': [moment().startOf('month'), moment().endOf('month')],
            '{{ __('Last Month') }}': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        'opens': 'left',
        'alwaysShowCalendars': true,
        'startDate': '{{ $start->format('d/m/Y') }}',
        'endDate': '{{ $end->format('d/m/Y') }}',
        'maxDate': moment(),
        'locale': {
            'format': 'DD/MM/YYYY',
            'firstDay': 1
        }
    }, function(start, end, label) {
        top.location.href = '{{ route('home') }}?start=' + start.format('YYYY-MM-DD') + '&end=' + end.format('YYYY-MM-DD');
    });
});
</script>
@endsection