@extends('layouts.app')
@section('content')
<div class="bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl p-10">
    <div class="container">
        <div class="flex flex-row gap-3 mb-5">
            <a href="" class="text-white uppercase">Beranda&nbsp;<i class="ri-arrow-right-line"></i></a>
            <a href="" class="text-white uppercase">Open Data {{request()->page}}&nbsp;</a>
        </div>
        <div class="flex flex-col justify-center">
            <div class="py-3">
                <h1 class="text-white bold text-4xl uppercase">Open Data {{request()->page}}</h1>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="container p-5 py-10">
        <div class="flex flex-row justify-between items-center mb-5">
            <div class="bold text-xl text-sky-700">4.000 Data</div>
            <div class="">
                <input type="text" class="form-input text-sm" placeholder="Data apa yang kamu cari....?">
            </div>
        </div>
        <div class="flex flex-row gap-3">
            <div class="card border p-3 w-1/4">
                <div class="flex flex-col gap-3">
                    <div><h5 class="font-bold text-md">Filter</h5></div>
                    <hr>
                    <div><input {{request()->page == 'opd' ? 'checked' : ''}} class="form-checkbox" type="checkbox">&nbsp;OPD</div>
                    <div><input {{request()->page == 'dataset' ? 'checked' : ''}} class="form-checkbox" type="checkbox">&nbsp;Dataset</div>
                    <div class="mt-3"><h5 class="font-bold text-md">Status</h5></div>
                    <hr>
                    <div><input class="form-checkbox" type="checkbox">&nbsp;Publik</div>
                    <div><input class="form-checkbox" type="checkbox">&nbsp;Terbatas</div>
                    <hr>
                    <div>
                        <button class="btn btn-sm bg-teal-500 w-full text-white">Cari Data</button>
                    </div>
                </div>
            </div>
            <divc class="w-full">
                <div class="grid grid-cols-1 gap-3">

                    <div class="card p-6 border w-full">
                        <div class="flex flex-row items-center gap-6">
                            <div>
                                <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
                            </div>
                            <div class="flex flex-col gap-3">
                                <a href="">
                                    <h4 class="bold text-md text-sky-700">Data Harga dan Pasokan Pangan Jakarta</h4>
                                </a>
                                <div class="w-3/4">
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati consequatur similique sapiente quod eum aperiam,
                                    </p>
                                </div>
                                <div class="flex flex-row gap-3">
                                    <h4 class="text-xs rounded bg-primary text-white p-1">Dinas Lingkungan Hidup Provinsi DKI</h4>
                                    <span class="bg-danger rounded text-white p-1 text-xs"><i class="ri-calendar-line"></i>&nbsp;11-09-2025</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card p-6 border w-full">
                        <div class="flex flex-row items-center gap-6">
                            <div>
                                <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
                            </div>
                            <div class="flex flex-col gap-3">
                                <h4 class="bold text-md text-sky-700">Data Harga dan Pasokan Pangan Jakarta</h4>
                                <div class="w-3/4">
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati consequatur similique sapiente quod eum aperiam,
                                    </p>
                                </div>
                                <div class="flex flex-row gap-3">
                                    <h4 class="text-xs rounded bg-primary text-white p-1">Dinas Lingkungan Hidup Provinsi DKI</h4>
                                    <span class="bg-danger rounded text-white p-1 text-xs"><i class="ri-calendar-line"></i>&nbsp;11-09-2025</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card p-6 border w-full">
                        <div class="flex flex-row items-center gap-6">
                            <div>
                                <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
                            </div>
                            <div class="flex flex-col gap-3">
                                <h4 class="bold text-md text-sky-700">Data Harga dan Pasokan Pangan Jakarta</h4>
                                <div class="w-3/4">
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati consequatur similique sapiente quod eum aperiam,
                                    </p>
                                </div>
                                <div class="flex flex-row gap-3">
                                    <h4 class="text-xs rounded bg-primary text-white p-1">Dinas Lingkungan Hidup Provinsi DKI</h4>
                                    <span class="bg-danger rounded text-white p-1 text-xs"><i class="ri-calendar-line"></i>&nbsp;11-09-2025</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card p-6 border w-full">
                        <div class="flex flex-row items-center gap-6">
                            <div>
                                <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
                            </div>
                            <div class="flex flex-col gap-3">
                                <h4 class="bold text-md text-sky-700">Data Harga dan Pasokan Pangan Jakarta</h4>
                                <div class="w-3/4">
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati consequatur similique sapiente quod eum aperiam,
                                    </p>
                                </div>
                                <div class="flex flex-row gap-3">
                                    <h4 class="text-xs rounded bg-primary text-white p-1">Dinas Lingkungan Hidup Provinsi DKI</h4>
                                    <span class="bg-danger rounded text-white p-1 text-xs"><i class="ri-calendar-line"></i>&nbsp;11-09-2025</span>
                                </div>
                            </div>
                        </div>
                    </div>

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