@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Tables</a></li>
    <li class="breadcrumb-item active" aria-current="page">Perbandingan Jumlah Transaksi</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Perbandingan Jumlah Transaksi</h6>
        <div class="input-group input-daterange col-md-6 col-xs-auto" style="margin-bottom: 1%">
          <input type="text" class="form-control" id="min" autocomplete="off">
          <div class="input-group-addon">to</div>
          <input type="text" class="form-control" id="max" autocomplete="off">
          <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="filter" value="filter">filter</button>
          </span>
        </div>
        <div id="Chart1" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Perbandingan Jumlah Transaksi</h6>
        <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th class="text-center font-weight-bold">Hari Ke</th>
                  <th class="text-center font-weight-bold">Total Transaksi Tahun ini</th>
                  <th class="text-center font-weight-bold">Total Transaksi Tahun lalu</th>
                  <th class="text-left font-weight-bold">Perbandingan</th>
                </tr>
              </thead>
              <tbody id="tbody_table">
                @foreach ($data as $item)   
                <tr>
                  <td class="text-center">{{$item['label']}}</td>
                  <td class="text-center">{{$item['tahun_ini']}}</td>
                  <td class="text-center">{{$item['tahun_lalu']}}</td>
                  <td class="text-left"><span class="@persenan_class($item['tahun_ini']-$item['tahun_lalu'])">@persenan_icon($item['tahun_ini']-$item['tahun_lalu']) {{persenanBanding($item['tahun_ini'],$item['tahun_lalu'],true)}}</span></td>
                </tr>
                @endforeach
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/progressbar-js/progressbar.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
  $('.input-daterange input').each(function() {
    $(this).datepicker({
      format: "mm-yyyy",
      viewMode: "months", 
      minViewMode: "months"
    });
  });
  $('#min').val('{{now()->subYear()->format("m-Y")}}')
  $('#max').val('{{now()->format("m-Y")}}')
  $('#filter').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    var date = '?mindate=' + min + '&maxdate=' + max + '&charttotaltrx=1';
    $.ajax({
        url: "{{route('table.layanan30daysnilai.json')}}" + date,
        async: false,
        dataType: "html",
        success: function(obj) {
          $('#tbody_table').empty();
          $('#tbody_table').append(obj);
        }
      });
    $.ajax({
      url: "{{route('table.layanan30daysnilai.chart.json')}}" + date,
      async: false,
      dataType: "json",
      success: function(obj) {
        perolehanBarChart.updateOptions({
          series: [{
            name: 'tahun kemarin',
            data: obj.tahun_lalu
          },
          {
            name: 'tahun ini',
            data: obj.tahun_ini
          }],
          xaxis: {
            type: 'category',
            categories: obj.label
          },
        });
      }
    });
    });

     // Apex Bar chart start
  var optionsbar = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [],
    xaxis: {
      type: 'category',
      categories: []
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
  tooltip: {
        style: {
            fontSize: '12px'
        }, 
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },
}
  
  var perolehanBarChart = new ApexCharts(document.querySelector("#Chart1"), optionsbar);
  
  perolehanBarChart.render();
  // Apex Bar chart end
  $(document).ready(function(){
      $.ajax({
        url: "{{route('table.layanan30daysnilai.chart.json')}}" + '?charttotaltrx=1',
        async: false,
        dataType: "json",
        success: function(obj) {
          perolehanBarChart.updateOptions({
            series: [{
              name: 'tahun kemarin',
              data: obj.tahun_lalu
            },
            {
              name: 'tahun ini',
              data: obj.tahun_ini
            }],
            xaxis: {
              type: 'category',
              categories: obj.label
            },
          });
        }
      })
    });
</script>
@endpush