@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 / <span class="bold">Dataset</span></h1>
      </div>
    </div>
    <div>
        <form action="" method="GET">
            <div class="relative w-full">
                <input type="text" name="key" placeholder="Data Apa yang kamu cari ?" style="border:none;" class="w-full placeholder-[#eee] pr-16 py-5 px-5 shadow-lg rounded-full focus:outline-none"/>
                <button  class="absolute top-15.5 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full" style="background: #E9811A;">
                    <i class="ri-search-line"></i>
                </button>
            </div>
        </form>
    </div>
  </section>
    <section class="container py-20 px-5">
        <div class="flex md:flex-row gap-6">
            <div class="bg-white text-center h-full rounded-[20px] shadow-lg p-5 py-10 gap-3 md:w-1/4">
                <div class="flex justify-between">
                    <div>
                        <h1 class="bold">Filter</h1>
                    </div>
                    <div>
                        <i class="ri-filter-line text-lg"></i>
                    </div>
                </div>
                <div class="flex flex-col gap-6 mt-6">
                    <div class="w-full">
                        <h1 class="mb-3 text-left">Instansi</h1>
                        <select class="form-input select2 rounded-[20px] w-full" name="" id="">
                            <option value="">-- Pilih Instansi --</option>
                            @foreach ($instansi as $dataInstansi)
                                <option value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full">
                        <h1 class="mb-3 text-left">Resource Data</h1>
                        <select class="form-input select2 rounded-[20px] w-full" name="" id="">
                            <option value="">-- Pilih Resource Data --</option>
                            @foreach ($template as $dataTemp)
                                <option value="{{encode_id($dataTemp->MsTemplateId)}}">{{$dataTemp->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="w-full">
                        <h1 class="mb-3 text-left">Tahun</h1>
                        <select class="form-input select2 rounded-[20px] w-full" name="" id="">
                            <option value="">-- Pilih Tahun --</option>
                            @for($i = date('Y'); $i >= (date('Y')-10); $i--)
                                <option value="">{{$i}}</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-3 gap-6 w-3/4">
                @forelse($dataset as $dataSet)
                    <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">
                            <div>
                                <img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
                                {{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
                                <h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
                            </div>
                            <div class="">
                                <h5 class="font-bold">{{ $dataSet->name }}</h5>
                            </div>
                            <div>
                                <p>{{ substr($dataSet->deskripsi,0,50) }}</p>
                            </div>
                            <div class="mt-1 flex flex-row gap-2 items-center">
                                <span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
                                <span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->template->name,0,25) }}...</span>
                            </div>
                            <div class="w-full">
                                <a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="p-2 bg-[#103760] rounded-full flex items-center text-white justify-center">
                                    Lihat Detail
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                    </svg>
                                </a>
                            </div>
                            
                        </div>
                        {{-- <div class="flex items-center justify-between w-full hidden">
                            <div class="flex flex-col gap-3">
                                
                            </div>
                            
                        </div> --}}
                    </div>
                @empty
                    <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex items-center justify-center ">
                        <h2 class="text-2xl">Data Tidak Ada</h2>
                    </div>
                @endforelse
                {{ @$dataset ? @$dataset->links() : '' }}
            </div>
        </div>
    </section>
@endsection