@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">Berita</h2>
                    <p class="text-slate-600 mt-2">Temukan data berita seputar SLHD</p>
                </div>
                <div class="relative w-full md:w-96">
                    <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 berita..." 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-1 gap-8">
            
            <!-- Sidebar Filters -->
            {{-- <aside class="space-y-8 hidden">
                <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">Instansi</h1>
                                <select class="p-3 bg-white border text-sm select2 rounded-xl 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 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($berita)}}</span> Berita 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 -->
                    @if(@$berita)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                            @foreach($berita as $val)
                                <div class="dataset-item bg-white  rounded-2xl shadow-lg transition-all" data-category="udara">
                                    <div class="flex flex-col justify-between">
                                        <img src="{{ $val['image'] }}" class="rounded-t-2xl w-full h-48 object-cover" alt="">
                                        <div class="p-6">
                                            <h4 class="text-[14px] font-bold text-slate-900 mb-2">{{ substr($val['name'],0,80) }}...</h4>
                                            <p class="text-sm text-slate-500 line-clamp-2 mb-4">{{ substr($val['deskripsi'],0,150) }}...</p>
                                            <div class="flex flex-wrap gap-2 mb-4">
                                                <span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">Beirta</span>
                                                <span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i>{{ date('d M Y',strtotime($val['created_at'])) }}</span>
                                            </div>
                                            <a href="{{ url('dataset/detail/'.encode_id($val['BeritaId'])) }}" class="text-blue-700 py-2  flex gap-3 rounded-xl text-sm font-bold items-center justify-start">
                                                Baca Selengkapnya <i data-lucide="arrow-right" class="w-4 h-4 mr-2"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Pagination -->
                <div class="mt-12">
                </div>
            </div>
        </div>
    </main>
@endsection