@extends('voyager::master')


@section('page_header')
<div class='container-fluid'>
  <h1 class='page-title'>
    <i class='icon-voyager-news'>Dashboard</i>
  </h1>
</div>
@stop

@section('css')
<link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
<style>
table, th, td {
  border: 1px solid grey;
}
</style>
@stop

@section('content')
<div class="page-content browse container-fluid">
  @include('voyager::alerts')
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-bordered">
        <div class="panel-body d-flex justify-content-center">
          <canvas id="lineChart" style="width:100%;max-width:700px"></canvas>
        </div>
      </div>
        <div class="panel panel-bordered">
          <div class="panel-body d-flex justify-content-center">
            <canvas id="genderChart" style="width:100%;max-width:600px"></canvas>
          </div>
        </div>
        <div class="panel panel-bordered">
          <div class="panel-body d-flex justify-content-center">
            <canvas id="typeMerchantChart" style="width:100%;max-width:600px"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@stop

@section('javascript')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
<script>
  const data = @json($data['traffic_pax']);
  var xValues = [50,60,70,80,90,100,110,120,130,140,150];
  var yValues = [7,8,8,9,9,9,10,11,14,14,15];

  for (var key of Object.keys(data)) {
    xValues = [data[key]['x']];
    yValues = [data[key]['y']];
  }

  new Chart("lineChart", {
    type: "line",
    data: {
      labels: xValues,
      datasets: [{
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(0,0,255,1.0)",
        borderColor: "rgba(0,0,255,0.1)",
        data: yValues
      }]
    },
    options: {
      legend: {display: false},
      scales: {
        // yAxes: [{ticks: {min: 0}}],
      }
    }
  });
</script>
<script>
  var male = {{$data['male']}};
  var female = {{$data['female']}};
  var xValues = ["Male", "Female"];
  var yValues = [male, female];
  
  if(female == 0 && male == 0){
    console.log(true)
    yValues = [1, 2];
  }
  var barColors = [
    "#b91d47",
    "#00aba9",
    // "#2b5797",
    // "#e8c3b9",
    // "#1e7145"
  ];

  new Chart("genderChart", {
    type: "pie",
    data: {
      labels: xValues,
      datasets: [{
        backgroundColor: barColors,
        data: yValues
      }]
    },
    options: {
      title: {
        display: true,
        text: "Pie Gender Chart"
      }
    }
  });
</script>
<script>
  var apps = {{$data['apps']}};
  var chatbot = {{$data['chatbot']}};
  var merchant = {{$data['merchant']}};
  var xValues = ["Apps", "Chatbot", "Merchant"];
  var yValues = [apps, chatbot, merchant];
  var barColors = [
    "#b91d47",
    "#00aba9",
    "#2b5797",
    // "#e8c3b9",
    // "#1e7145"
  ];

  if(apps == 0 && merchant == 0 && chatbot == 0){
    console.log(true)
    yValues = [1, 2, 3];
  }

  new Chart("typeMerchantChart", {
    type: "pie",
    data: {
      labels: xValues,
      datasets: [{
        backgroundColor: barColors,
        data: yValues
      }]
    },
    options: {
      title: {
        display: true,
        text: "Pie Type Merchant Chart"
      }
    }
  });
</script>
@stop