@extends('staff::layouts.default')
@section('title',trans('admin_default.customer_report'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.customer_report')}}</a></li>
@endsection

@section('content')

<div class="content-wrapper">

    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Registered Customers</h6>
                </div>
                <div id="columnchart_values" class="chart-large-width"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Registered Customers</h6>
                </div>
                <div id="div_pie_chart" class="chart-large-width"></div>
            </div>
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Top Purchase Customers</h6>
                </div>
                <div id="div_purchase_chart" class="chart-large-width"></div>
            </div>
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Top Redemption Customers</h6>
                </div>
                <div id="div_redemption_chart" class="chart-large-width"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Registered Customers</h6>
                </div>
                <div id="filter_newly_customer" class="chart-large-width"></div>
            </div>
        </div>
    </div>

</div>

<style type="text/css">
.chart-large-width
{
    width: 100%;
    height: 300px;
}
.chart-medium-width
{
    width: 50%;
    height: 300px;
}
</style>

@endsection

@section('script')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var colors = ['#29B6F6', '#1E88E5', '#66BB6A', '#FF7043', '#EC407A', '#8D6E63', '#26A69A', '#F44336', '#607D8B','#7E57C2'];
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Day', 'Newly', 'Total'],
        ['01', 10, 100],
        ['02', 16, 110],
        ['03', 28, 126],
        ['04', 0, 154],
        ['05', 10, 154],
        ['06', 5, 164]
    ]);

    var view = new google.visualization.DataView(data);

    var registered_options = {
        title: "",
        bar: {groupWidth: "95%"},
        legend: { position: "top" },
        chartArea: {'width': '85%', 'height': '80%'},
        isStacked: true,
    };
    // newly customer
    var chart = new google.visualization.BarChart(document.getElementById("columnchart_values"));
    chart.draw(view, registered_options);

    // top purchase
    var purchase_data = google.visualization.arrayToDataTable([
        ["Customer", "Number"],
        ["Customer 1", 1500],
        ["Customer 2", 1200],
        ["Customer 3", 800],
        ["Customer 4", 1500],
        ["Customer 5", 1200],
        ["Customer 6", 800],
        ["Customer 7", 1500],
        ["Customer 8", 1200],
        ["Customer 9", 800],
        ["Customer 10", 800]
    ]);
    var purchase_view = new google.visualization.DataView(purchase_data);
    var purchase_options = {
        title: "",
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
        chartArea: {'width': '85%', 'height': '80%'},
    };
    var purchase_chart = new google.visualization.BarChart(document.getElementById("div_purchase_chart"));
    purchase_chart.draw(purchase_view, purchase_options);

    // top redemption
    var redeem_data = google.visualization.arrayToDataTable([
        ["Customer", "Number", { role: "style" } ],
        ["Customer 1", 200, "#b87333"],
        ["Customer 2", 190, "silver"],
        ["Customer 3", 80, "gold"]
    ]);
    var redeem_view = new google.visualization.DataView(redeem_data);
    redeem_view.setColumns([0, 1,
                        { calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" 
                        },
                        2]);
    var redeem_options = {
        title: "",
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
        chartArea: {'width': '85%', 'height': '80%'},
    };
    var redemption_chart = new google.visualization.BarChart(document.getElementById("div_redemption_chart"));
    redemption_chart.draw(redeem_view, redeem_options);

    // pie chart
    var pie_chart_data = google.visualization.arrayToDataTable([
        ['Type', 'Customer'],
        ['Total',     50],
        ['Newly',    27]
    ]);
    var pie_chart_options = {
      title: ''
    };
    var pie_chart = new google.visualization.PieChart(document.getElementById('div_pie_chart'));
    pie_chart.draw(pie_chart_data, pie_chart_options);

    // newly customer by yearly or semesterly
    var data = google.visualization.arrayToDataTable([
        ['Day', 'Newly', 'Total'],
        ['2013', 16, 110],
        ['2014', 28, 126],
        ['2015', 0, 154],
        ['2016', 10, 154],
        ['2017', 5, 164]
    ]);

    var view = new google.visualization.DataView(data);

    var registered_options = {
        title: "",
        bar: {groupWidth: "95%"},
        legend: { position: "top" },
        chartArea: {'width': '85%', 'height': '80%'},
        isStacked: true,
    };
    // newly customer
    var chart = new google.visualization.BarChart(document.getElementById("filter_newly_customer"));
    chart.draw(view, registered_options);

}
</script>
@parent

@endsection