@extends('layouts.user')
{{-- Web site Title --}}
@section('title')
@stop
@section('styles')
<link rel="stylesheet" type="text/css" href="{{url('css/c3.min.css')}}">
@stop
{{-- Content --}}
@section('content')
<div class="row">
    <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">Services</div>
                <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <td>Title</td>
                            <td>URL</td>
                            <td>Total reservation</td>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($sources as $source)
                        <tr>
                            <td>{{$source->title}}</td>
                            <td>{{$source->url}}</td>
                            <td>{{count($source->reservations)}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                </div>
            </div>
    </div>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-body">
                <div id="chart"></div>
            </div>
        </div>
    </div>
</div>
@stop
{{-- Scripts --}}
@section('scripts')
<script type="text/javascript" src="{{url('js/d3.v3.min.js')}}"></script>
<script type="text/javascript" src="{{url('js/c3.min.js')}}"></script>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
        type : 'pie',
        columns: [
        @foreach($sources as $source)
           ['{{$source->title}}', {{count($source->reservations)}}],
        @endforeach
        ]
    }
});
</script>
@stop