@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}}, 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: [ 
          
          { opposite: false, min: 0, title: { text: res.yOpposite } } 
        ], 
        tooltip: { shared: true, intersect: false }, 
        stroke: { width: [0,1] }, 
        plotOptions: { bar: { columnWidth: '45%' } }, 
        legend: { position: 'left' }, 
        series: res.series 
      }; new ApexCharts(document.querySelector("#chart"), options).render(); });
</script>

@endsection