@extends('layouts.app')
@section('css')
@endsection
@section('content')
    <section class="container relative pt-30 py-20 pb-0 px-5 flex flex-col gap-5">
        <div class="relative flex justify-between items-center content-center mb-10">
        <div>
            <h1 class="">Home / <a href="{{ url('dataset') }}">Dataset</a> / <span class="bold">{{ $dataset->name }}</span></h1>
        </div>
        </div>
    </section>
    <section class="container pb-10 pt-10 px-5">
        <div class="flex flex-col gap-6">
            <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
                <div class="flex flex-col gap-3 items-center text-center w-1/4">
                    <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
                    <h1 class="font-bold">{{ $dataset->instansi->name }}</h1>
                    <a href="{{asset('uploads/'.$dataset->file)}}" class="rounded-full text-[12px] bg-success text-white px-2 py-1">Download <i class="ri-download-line"></i></a>
                </div>
                <div class="flex items-center justify-between w-3/4">
                    <div class="flex flex-col gap-3">
                        <div class="">
                            <h5 class="font-bold">{{ $dataset->name }}</h5>
                        </div>
                        <div>
                            <p>{{ $dataset->deskripsi }}</p>
                        </div>
                        <div class="mt-1 flex flex-row gap-2 items-center">
                            <span class="rounded-full text-[10px] bg-[#103760] text-white px-2 py-1">{{$dataset->tahun}}</span>
                            <span class="rounded-full text-[10px] hidden lg:block bg-[#103760] text-white px-2 py-1">{{$dataset->template->name}}</span>
                        </div>
                        <div class="flex gap-1">
                            <span>Bagikan : </span>
                            <a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-facebook-line"></i></a>
                            <a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-whatsapp-line"></i></a>
                            <a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-twitter-line"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <?php 
                $data = json_decode($dataset->data);
            ?>
            @if(@$data)
            <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
                <div style="overflow-x:auto;">
                    <table id="table"
                        data-toggle="table"
                        data-search="false"
                        data-pagination="true"
                        data-side-pagination="server"
                        data-url="{{ url('dataset/Griddetail?id='.@$keyId) }}"
                        >
                        <thead>
                            <tr class="bg-primary-light text-primary">
                                @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>
            @endif

        </div>
    </section>
    <section class="relative bg-[#F0F0F0] ">
        <div class="container px-10 py-10">
        <div class="relative flex justify-between items-center content-center mb-10">
        <div>
            <h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
        </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @foreach($lainnya as $dataSet)
        <div class="bg-white rounded-[20px] shadow-lg p-5 py-10">
            <div class="flex flex-col gap-3 mx-auto items-center text-center">
                <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
                <h1 class="font-bold">{{ @$dataSet->instansi->name }}</h1>
                <h5 class="">{{ $dataSet->name }}</h5>
                <a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
            </div>
        </div>
        @endforeach

        </div>
        </div>
  </section>
@endsection