@extends('layouts.master')
@section('content')
<!-- Page Title Start -->
<div class="flex justify-between items-center mb-6">
    <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">{{ $title }}</h4>
    @if(auth()->user()->group_id == 1)
      <a href="{{ url('dashboard/dataset/resource/'.encode_id($id)) }}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i> Kembali</a>
    @else
      <a href="{{ url('dashboard') }}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i> Kembali</a>
    @endif
</div>
<!-- Page Title End -->
<div class="grid xl:grid-cols-1 lg:grid-cols-1 grid-cols-1 gap-6 mb-6">
    <div class="card">
            <div class="p-6">
                <div class="flex flex-col items-center">
                    <div class="w-full">
                        <h5 class="text-lg bold mb-5">{{@$dataset->instansi->name}}</h5>
                        <p>Ini adalah data {{$dataset->template->name}} 5 tahun terakhir, berdasarkan data yang sudah di upload sebelumnya</p>
                        <div id="chart"></div>
                    </div>
                </div>
            </div>
    </div>
</div>
<!-- end row -->
@endsection
@section('js')
<!-- Apex Charts js -->
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>

<!-- Vector Map Js -->
<script src="{{asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{asset('assets/libs/jsvectormap/maps/world.js')}}"></script>
<script>
  var base_url = '{{ url("dashboard/api/chart/".encode_id($template->MsTemplateId)."/".encode_id($instansi_id)) }}';
  fetch(base_url)
  .then(res => res.json())
  .then(res => {
    const options = {
      chart: { type: 'line', height: 480 },
      title: { text: res.title, align: 'center' },
      xaxis: { categories: res.years, title: { text: 'Tahun' } },
      yaxis: [
        { title: { text: res.yTitle } },
        { opposite: true, min: 0, max: 100, title: { text: res.yOpposite } }
      ],
      tooltip: { shared: true, intersect: false },
      stroke: { width: [0,3] },
      plotOptions: { bar: { columnWidth: '45%' } },
      legend: { position: 'bottom' },
      series: res.series
    };

    new ApexCharts(document.querySelector("#chart"), options).render();
  });

</script>

@endsection