@extends('layouts.appNew')
@section('content')
<!-- Header / Breadcrumb -->
    <header class="pt-32 pb-8 bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex mb-4 text-sm font-medium text-slate-500" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2">
                    <li><a href="dataset.html" class="hover:text-blue-600 transition-colors">Dataset Utama</a></li>
                    <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i></li>
                    <li class="text-slate-900 truncate max-w-[200px] md:max-w-none">{{ $dataset->name }}</li>
                </ol>
            </nav>
            <div class="flex flex-col md:flex-row md:items-start justify-between gap-6">
                <div class="max-w-3xl">
                    <div class="flex items-center space-x-3 mb-3">
                        {{-- <span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">Udara</span> --}}
                        <span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i> Terbit: {{ date('d M Y',strtotime($dataset->created_at)) }}</span>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-extrabold text-slate-900 tracking-tight leading-tight">{{ $dataset->name }}</h2>
                    <h2 class="mt-3 text-md text-blue-500 tracking-tight leading-tight">{{ $dataset->instansi->name }}</h2>
                </div>
                <div class="flex gap-2">
                    @if($dataset->tahun >= 2026)
                        <a href="{{url('opendata/dataset/download/'.encode_id(@$dataset->DatasetId))}}" class="flex-1 md:flex-none bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all flex items-center justify-center shadow-lg shadow-blue-100">
                            <i data-lucide="download" class="w-5 h-5 mr-2"></i> Unduh Data
                        </a>
                    @else
                        <a href="{{asset('uploads/'.@$dataset->file)}}" class="flex-1 md:flex-none bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all flex items-center justify-center shadow-lg shadow-blue-100">
                            <i data-lucide="download" class="w-5 h-5 mr-2"></i> Unduh Data
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="grid lg:grid-cols-3 gap-8">
            
            <!-- Left Column: Details & Preview -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- Description Section -->
                <section class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                    <h3 class="text-lg font-bold mb-4 flex items-center text-slate-900">
                        <i data-lucide="info" class="w-5 h-5 mr-2 text-blue-600"></i> Deskripsi Dataset
                    </h3>
                    <p class="text-slate-600 leading-relaxed">
                        {{ $dataset->deskripsi }}
                    </p>
                </section>

                <!-- Data Preview Section -->
                <section class="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-100 flex justify-between items-center">
                        <h3 class="text-lg font-bold text-slate-900 flex items-center">
                            <i data-lucide="table" class="w-5 h-5 mr-2 text-blue-600"></i> Data Grid - {{ $dataset->tahun >= 2026 ? $dataset->tabelData->name : $dataset->name }}
                        </h3>
                        {{-- <span class="text-xs font-bold text-slate-400 uppercase">Jumlah Row Data: 100</span> --}}
                    </div>
                    <div class="overflow-x-auto custom-scrollbar">
                        @if ($dataset->tahun >= 2026)
                            <table class="w-full text-left border-collapse" id="table"
                                data-toggle="table"
                                data-search="false"
                                data-pagination="true"
                                data-page-size="10"
                                data-page-list="[10,25,50,100]"
                                data-side-pagination="server"
                                data-url="{{ url('dataset/Griddetail?id='.encode_id($keyId)) }}">
                                <thead class="bg-slate-100 border-b border-slate-100">
                                    <tr>
                                        <th data-field="no" class="text-[10px] px-6 py-4 border font-bold text-slate-900">No</th>
                                        @foreach ($tabel as $k => $key)
                                            <th data-field="{{$key->order}}" class="text-[10px] px-6 py-4 border font-bold text-slate-900">{{ $key->name }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                            </table>
                        @else
                            <?php $data = json_decode($dataset->data); ?>
                            <table class="w-full text-left border-collapse" id="table"
                                data-toggle="table"
                                data-search="false"
                                data-pagination="true"
                                data-side-pagination="server"
                                data-url="{{ url('dataset/Griddetail2025?id='.@$keyId) }}"
                                >
                                <thead class="bg-slate-100 border-b border-slate-100">
                                    <tr>
                                        @if (!empty($data))
                                            @foreach ($data[0] as $k => $key)
                                                <th data-field="{{$k}}" class="text-[10px] px-6 py-4 border font-bold text-slate-900">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
                                            @endforeach
                                        @endif
                                    </tr>
                                </thead>
                            </table>
                        @endif
                        
                    </div>
                </section>
            </div>

            <!-- Right Column: Metadata & Format -->
            <div class="space-y-6">
                <!-- Metadata Card -->
                <section class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
                    <h3 class="text-sm font-bold text-slate-900 uppercase tracking-widest mb-6 flex items-center"><i data-lucide="info" class="w-5 h-5 mr-2 text-blue-600"></i> Informasi Metadata</h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center py-2 border-b border-slate-50">
                            <span class="text-sm text-slate-500">Tahun Data</span>
                            <span class="text-sm font-bold text-slate-900">{{ $dataset->tahun_data }}</span>
                        </div>
                        <div class="flex justify-between items-center py-2 border-b border-slate-50">
                            <span class="text-sm text-slate-500">Tahun Input Data</span>
                            <span class="text-sm font-bold text-slate-900">{{ $dataset->tahun }}</span>
                        </div>
                        <div class="flex justify-between items-center py-2 border-b border-slate-50">
                            <span class="text-sm text-slate-500">Kategori</span>
                            <span class="text-sm font-bold text-slate-900">{{ @$dataset->tabelData->kategori ?? '-' }}</span>
                        </div>
                        {{-- <div class="flex justify-between items-center py-2 border-b border-slate-50">
                            <span class="text-sm text-slate-500">Organisasi</span>
                            <span class="text-sm font-bold text-blue-600 underline">{{ $dataset->instansi->name }}</span>
                        </div> --}}
                        {{-- <div class="flex justify-between items-center py-2 border-b border-slate-50">
                            <span class="text-sm text-slate-500">Dilihat</span>
                            <span class="text-sm font-bold text-slate-900">1.240 Kali</span>
                        </div>
                        <div class="flex justify-between items-center py-2">
                            <span class="text-sm text-slate-500">Organisasi</span>
                            <span class="text-sm font-bold text-slate-900">Dinas Lingkungan Hidup</span>
                        </div> --}}
                    </div>
                </section>

            </div>
        </div>
    </main>
@endsection