@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>
    <a href="{{ url('dashboard/dataset/resource/'.encode_id($id)) }}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i> Kembali</a>
</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')
<script src="{{asset('assets/js/pages/dashboard-analytics.js')}}"></script>
<!-- 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 options = {
          series: [{
          name: 'Luas Kawasan',
          data: [41176, 13176, 38176, 55176, 42176]
        }, {
          name: 'Kawasan Hutan Lindung',
          data: [31176, 23176, 58176, 65176, 42176]
        }, {
          name: 'Kawasan Air',
          data: [11176, 23176, 58176, 25176, 12176]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['2020', '2021', '2022', '2023', '2024'],
        },
        yaxis: {
          title: {
            text: ''
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return " " + val + " "
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
</script>
@endsection