@extends('layouts.master')
@section('css')
@endsection
@section('content')
<div class="flex flex-col gap-6">
    <div class="card">
        <div class="card-header">
            <div class="flex justify-between items-center">
                <h4 class="card-title">{{$title}}</h4>
            </div>
        </div>
        <div class="p-6">
            <div class="grid lg:grid-cols-1 gap-3">
                <table class="gridjs-table">
                    <tbody class="gridjs-tbody">
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Instansi</td>
                            <td class="gridjs-td border-none text-xs">{{$item->instansi->name}}</td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Resource Data</td>
                            <td class="gridjs-td border-none text-xs">{{$item->template->name}}</td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Nama Dataset</td>
                            <td class="gridjs-td border-none text-xs">{{$item->name}}</td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Sifat Dataset</td>
                            <td class="gridjs-td border-none text-xs">
                                @if($item->publik == 1)
                                    <span class="p-1 text-xs text-white rounded  bg-success">Terbuka/Publik</span>
                                @else
                                    <span class="p-1 text-xs text-white rounded bg-primary">Rahasia/Private</span>
                                @endif
                            </td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Tags</td>
                            <td class="gridjs-td border-none text-xs">{!!tags($item->tags)!!}</td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">File : </td>
                            <td class="gridjs-td border-none text-xs"><a href="{{asset('uploads/'.@$item->file)}}" class="btn bg-primary text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a></td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Topik</td>
                            <td class="gridjs-td border-none text-xs">{!! topikByDataset($item->topik)!!}</td>
                        </tr>
                        <tr class="gridjs-tr">
                            <td class="gridjs-td border-none text-xs">Deskripsi</td>
                            <td class="gridjs-td border-none text-xs">{{$item->deskripsi}}</td>
                        </tr>
                    </tbody>
                </table>
                <?php 
                    $data = json_decode($item->data);
                ?>

                <div style="overflow-x:auto;">

                <table id="table"
                    data-toggle="table"
                    data-search="false"
                    data-pagination="true"
                    data-side-pagination="server"
                    data-url="{{ route($route.'.gridDetail', ['id' => $keyId]) }}"
                    >
                    <thead>
                        <tr class="bg-secondary text-white">
                            @if (!empty($data))
                                @foreach ($data[0] as $k => $key)
                                    <th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
                                @endforeach
                            @endif
                        </tr>
                    </thead>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
@endsection