@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') }}" 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-4 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
    @foreach($instansi as $dataInstansi)
    <a href="{{url('dashboard/dataset/resource/instansi/'.encode_id($dataInstansi->MsInstansiId).'/'.$id)}}">
        <?php
            $tahun = '';
            $year = \App\Models\Dataset::where('template_id',decode_id($id))->where('instansi_id',$dataInstansi->MsInstansiId)->orderBy('tahun','ASC')->pluck('tahun')->toArray();
            $bg = 'info';

            if(@$dataInstansi->alias == 'dinas'){
                $bg = 'success';
            }elseif(@$dataInstansi->alias == 'biro'){
                $bg = 'warning';
            }elseif(@$dataInstansi->alias == 'badan'){
                $bg = 'danger';
            }elseif(@$dataInstansi->alias == 'deputi'){
                $bg = 'info';
            }

        ?>
        <div class="card border-top-{{$bg}}">
            <div class="p-6">
                <div class="flex flex-col items-center">
                    <div class="w-full hidden">
                        {{-- <div class="flex justify-between">
                            <div class="p-1 bg-primary text-white rounded text-xs">{{date('Y')}}</div>
                        </div> --}}
                        <div class="flex items-center justify-between">
                            <div class="px-4 py-3 rounded-full bg-{{$bg}}-light">
                                <i class="ri-database-2-line text-lg text-{{$bg}}"></i>
                            </div>
                            <div>
                                <h2 class="text-3xl bold my-3 py-0.5">0</h2> 
                            </div>
                        </div>
                        
                    </div>
                    <div class="w-full">
                        <div class="">
                            <div class="mb-2"><h5 class="text-sm font-bold mt-0 truncate">{{$dataInstansi->name}}</h5></div>
                            <div class="mb-2">
                                @foreach ($year as $tahun)
                                    <span class="p-1 bg-info-light rounded text-white">{{ $tahun }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div> <!-- end row-->
            </div> <!-- end p-6 -->
        </div> <!-- end card -->
    </a>
    @endforeach
    

    
</div>
<div class="grid grid-cols-1 gap-6 mb-6">
    {{ $instansi->render() }}
    </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>
@endsection