@extends('layouts.master-vnext')

@section('page-title')
{{ $contact->firstName }} {{ $contact->lastName }}
<small>Details</small>
@endsection

@section('content')

@foreach($bookings as $booking)

<div class="row">
    <div class="col-md-12">
        <div class="box">

            <div class="box-body">
                <div class="row">
                    <div class="col-md-4">
                        <h3>@date($booking->checkIn, "d M Y") - @date($booking->checkOut, "d M Y")</h3>
                        <h4>Sales: <b>@currency($booking->salesTotal)</b> {{ $currency->symbol }}</h4>
        <a href="{{ action("Guest\AccountController@details", [$booking->id]) }}" class="btn btn-default">
            <i class="fa fa-info"></i> Show details
        </a>

        <a href="{{ action("Guest\AccountController@invoice", [$booking->id]) }}" class="btn btn-default" target="_new"><i class="fa fa-print"></i> Print invoice</a>
                    </div>

                    <div class="col-md-4">
                        <canvas id="chart_{{ $booking->id }}"></canvas>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

@endforeach


@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(division, a)
{
    if(division === "Pub") { idx = 5; }
    if(division === "DC") { idx = 1; }
    if(division === "Admin") { idx = 2; }
    if(division === "Trips") { idx = 3; }
    if(division === "Resort") { idx = 4; }

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

@foreach($bookings as $booking)

var chart_{{ $booking->id }} = new Chart($("#chart_{{ $booking->id }}"), {
    type: 'doughnut',
    data: {
        labels: [
        @foreach($booking->salesByDivision() as $key => $value)
            "{{ $key }}: @currency($value) {{ $currency->symbol }}",
        @endforeach
        ],
        datasets: [{
            data: [
            @foreach($booking->salesByDivision() as $key => $value)
                {{ $value }},
            @endforeach
            ],
            backgroundColor: [
            @foreach($booking->salesByDivision() as $key => $value)
                lineColor("{{ $key }}", 0.2),
            @endforeach
            ],
            borderColor: [
            @foreach($booking->salesByDivision() as $key => $value)
                lineColor("{{ $key }}", 1),
            @endforeach
            ]
        }],
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        title: {
            display: true,
            text: "Sales by division",
        },
        legend: {
            display: true,
            position: "right"
        },
        tooltips: {
            callbacks: {
                label: function(item, data) {
                    return chart_{{ $booking->id }}.data.labels[item.index];
                }
            }
        },
        animation: { animateRotate: false },
    },
});

@endforeach

</script>
@endsection