@extends('layouts.appNew')
@section('content')
<!-- Header Section -->
    <header class="pt-32 pb-12 bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div>
                    <h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Eksplorasi Dataset Tambahan</h2>
                    <p class="text-slate-600 mt-2">Temukan data mentah kinerja lingkungan hidup</p>
                </div>
                <div class="relative w-full md:w-96 hidden">
                    <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5"></i>
                    <input type="text" id="dataset-search" placeholder="Cari nama dataset..." class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid lg:grid-cols-4 gap-8">
            
            <!-- Sidebar Filters -->
            <aside class="space-y-8">
                <div class="bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
                    <form action="" method="GET">
                        <h3 class="font-bold text-slate-900 mb-4 flex items-center">
                            <i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
                        </h3>
                        <div class="flex flex-col gap-6 mt-6">
                            <div class="w-full">
                                <h1 class="mb-3 font-bold text-left">Organisasi</h1>
                                <select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="instansi_id" id="">
                                    <option value="">-- Pilih Organisasi --</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 font-bold text-left">Sumber Data</h1>
                                <select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="resource_id" id="">
                                    <option value="">-- Pilih Sumber 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 font-bold">Tahun Data</h1>
                                <select class="p-3 bg-white border text-sm select2 rounded-xl 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="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
                                    <i data-lucide="search" class="w-4 h-4 mr-2"></i> Cari
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="p-6 bg-blue-600 rounded-2xl text-white shadow-xl shadow-blue-200">
                    <i data-lucide="info" class="mb-4"></i>
                    <h4 class="font-bold mb-2">Request Data?</h4>
                    <p class="text-sm text-blue-100 mb-4">Tidak menemukan data yang Anda cari? Silakan ajukan permohonan informasi publik.</p>
                    <button class="w-full bg-white text-blue-600 py-2 rounded-lg font-bold text-sm hover:bg-blue-50 transition-colors">Ajukan Permohonan</button>
                </div>
            </aside>

            <!-- Dataset Grid -->
            <div class="lg:col-span-3">
                <div class="flex justify-between items-center mb-6">
                    <p class="text-sm text-slate-500 font-medium"><span id="count-display">{{count($dataset)}}</span> Dataset ditemukan</p>
                    <div class="flex items-center space-x-2">
                        <label class="text-xs font-bold text-slate-400 uppercase">Urutkan:</label>
                        <select class="bg-transparent border-none text-sm font-bold text-blue-600 focus:ring-0 outline-none cursor-pointer">
                            <option>Terbaru</option>
                            <option>Populer</option>
                            <option>A-Z</option>
                        </select>
                    </div>
                </div>

                <div id="dataset-container" class="space-y-4">
                    <!-- Dataset Item Udara -->
                    @foreach($dataset as $dataSet)
                    <div class="dataset-item bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all" data-category="udara">
                        <div class="flex flex-col md:flex-row justify-between gap-4">
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->instansi->name }}</span>
                                    <span class="bg-emerald-100 text-emerald-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->tahun_data }}</span>
                                    <span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i> Update: {{ date('d M Y',strtotime($dataSet->created_at)) }}</span>
                                </div>
                                <h4 class="text-lg font-bold text-slate-900 mb-2">{{ $dataSet->name }}</h4>
                                <p class="text-sm text-slate-500 line-clamp-2 mb-4">{{ substr($dataSet->deskripsi,0,150) }}...</p>
                                <div class="flex flex-wrap gap-2">
                                    <span class="flex items-center bg-slate-100 text-slate-600 px-2 py-1 rounded text-[10px] font-bold">XLSX</span>
                                </div>
                            </div>
                            <div class="flex flex-row md:flex-col justify-end gap-2 md:w-32">
                                <a href="{{asset('uploads/'.$dataset->file)}}" class="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
                                    <i data-lucide="download" class="w-4 h-4 mr-2"></i> Unduh
                                </a>
                                <a href="{{ url('dataset-tambahan/detail/'.encode_id($dataSet->DatasetId)) }}" class="flex-1 md:w-full border border-slate-200 text-slate-700 py-2 px-4 rounded-xl text-sm font-bold hover:bg-slate-50 transition-all flex items-center justify-center">
                                    <i data-lucide="eye" class="w-4 h-4 mr-2"></i> Detail
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>

                <!-- Pagination -->
                <div class="mt-12">
                    {{ @$dataset ? @$dataset->links() : '' }}
                </div>
            </div>
        </div>
    </main>
@endsection