@extends('layouts.master')

@section('page-title')
<i class="fa fa-bar-chart-o"></i> {{ $good->name }}
<small>{{ $good->group->category->name }} - {{ $good->group->name }}</small>
@endsection

@section('breadcrumb')
@endsection

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-body">
                <canvas id="myChart" width="400" height="100"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-body">
                <table class="table table-hover no-margin" style="margin-top: 20px;">
                    <thead>
                        <tr>
                            <th>Supplier</th>
                            <th class="text-right">Total units</th>
                            <th class="text-right">Total price</th>
                            <th class="text-right">Average price</th>
                            <th class="text-right">Maximum savings in reference to AVG of {{ number_format($referenceAverage, 2) }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($datasets->sortByDesc('totalValue') as $supplierName => $dataset)
                        <tr>
                            <td>{{ $supplierName }}</td>
                            <td class="text-right">{{ number_format($dataset['totalUnits'], 2) }}</td>
                            <td class="text-right">{{ number_format($dataset['totalValue'], 2) }}</td>
                            <td class="text-right">{{ number_format($dataset['averageUnitPrice'], 2) }}</td>
                            <td class="text-right">{{ number_format(($dataset['averageUnitPrice'] - $referenceAverage) * $dataset['totalUnits'], 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script type="text/javascript">

var colors = [
    {"r": 255, "g": 99, "b": 132},
    {"r": 54, "g": 162, "b": 235},
    {"r": 255, "g": 206, "b": 86},
    {"r": 75, "g": 192, "b": 192},
    {"r": 153, "g": 102, "b": 255},
    {"r": 255, "g": 159, "b": 64},

    {"r": 57, "g": 106, "b": 117},
    {"r": 218, "g": 124, "b": 48},
    {"r": 62, "g": 150, "b": 81},
    {"r": 204, "g": 37, "b": 41},
    {"r": 83, "g": 81, "b": 84},
    {"r": 107, "g": 76, "b": 154},
    {"r": 146, "g": 36, "b": 40},
    {"r": 146, "g": 139, "b": 61}
];

var lineColor = function(idx, a)
{
    var color = colors[idx];
    return "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a + ")";
}

var ctx = $("#myChart");

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            @foreach($datasets as $supplierName => $dataset)
            {
                label: '{{ $supplierName }}',
                fill: false,
                borderColor: lineColor({{ $loop->index }}, 1),
                backgroundColor: lineColor({{ $loop->index }}, 0.2),
                data: [
                    @foreach($dataset['data'] as $sale)
                    { x: "{{ $sale['x'] }}", y: "{{ $sale['y'] }}" },
                    @endforeach
                ]
            },
            @endforeach
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Price per unit in PHP'
                }
            }]
        }
    }
});

</script>
@endsection