@extends('layouts.app')
@section('css')
@endsection
@section('content')
  
  <section class="container relative pt-[150px] 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-8 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 flex-col lg:flex-row gap-6">
            <div class="bg-white text-center h-full rounded-[20px] shadow-lg p-5 py-10 gap-3 w-full lg:w-1/4">
                <form action="" method="GET">
                    <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="instansi_id" id="">
                                <option value="">-- Pilih Instansi --</option>
                                @foreach ($instansi as $dataInstansi)
                                    <option {{ decode_id(@request()->instansi_id) == $dataInstansi->MsInstansiId ? 'selected' : '' }} 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="resource_id" id="">
                                <option value="">-- Pilih Resource Data --</option>
                                @foreach ($template as $dataTemp)
                                    <option {{ decode_id(@request()->resource_id) == $dataTemp->MsTemplateId ? 'selected' : '' }} 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="tahun" id="">
                                <option value="">-- Pilih Tahun --</option>
                                @for($i = date('Y'); $i >= (date('Y')-10); $i--)
                                    <option {{ @request()->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="w-full">
                            <button class="rounded w-full bg-[#E9811A] text-white px-2 py-1">Cari</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="w-full lg:w-3/4">
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($dataset as $dataSet)
                        <a href="{{ url('dataset-tambahan/detail/'.encode_id($dataSet->DatasetTambahanId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
                            <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 class="flex flex-col items-center gap-3">
                                        <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>
                        </div>
                    </a>
                    @endforeach
                </div>
                @if(count($dataset) == 0)
                    <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>
                @endif
                <br>
                {{ @$dataset ? @$dataset->links() : '' }}
            </div>
        </div>
    </section>
@endsection