@php

$bencana = \Modules\Berita\Models\Berita::IdKategori(16)
    ->orderBy('created_at', 'desc')
    ->skip(1)
    ->take(4)
    ->get();
$headline = \Modules\Berita\Models\Berita::IdKategori(16)
    ->orderBy('created_at', 'desc')
    ->take(1)
    ->get();


$setting = \Modules\Berita\Models\KategoriBerita::with('setting')->find(16);
@endphp
@push ('page_css')
<style type="text/css">

.container-widget-info-bencana {
background-image: url({{ storage($setting->setting->bg_card_image,'card')}});
background-size: cover;
background-color: {{ $setting->setting->bg_card_color ?? 'transparent' }};
background-repeat: no-repeat;
width: 100%;
min-height: {{ $setting->setting->card_height ?? '150px' }};
border-radius: 0px;
}.container-widget-info-bencana .caption{
color: {{ $setting->setting->card_text_color ?? 'text-gray-900' }};
line-height: 1;
}
.logo-widget-info-bencana {
background-image: url({{ storage($setting->setting->icon_card,'card')}});
background-size: cover;
background-repeat: no-repeat;
width: 280px;
height: 120px;
display: inline-block;

}
</style>
@endpush
@if ($bencana->count() > 0)
<div class="container-widget-info-bencana mb-2">
 
<div class="mb-2">
 

    @foreach ($headline as $row)
         <a class="relative cursor-pointer" href="{{ route('frontend.berita.show', [encode_id($row->id), $row->slug]) }}">
                <div class="bg-gray-900 py-2 px-3 top-0 left-0 right-0 text-sm text-white uppercase mb-0">
                   <div class="text-white font-semibold">info bencana</div>
                    </div>
                <div class="relative w-full aspect-video overflow-hidden">
                   

                    <img class=" w-full h-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110"
                        src="{{ asset_cdn($row->image,'thumbnail','berita') }}"
                        title="{{$row->judul}}" alt="{{$row->judul}}" loading="lazy">

                    <div
                        class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-gray-900 to-transparent text-white">
                      <h4 class="hover:text-gray-400 text-base text-gray-100">{{ $row->judul }}</h4>
                      <div class="text-sm -mt-1 font-normal">
                         {{ datepub($row->published_at) }}
                       </div>
                    </div>
                </div>
            </a>
            @endforeach
   </div>





    <div class="mt-2 py-2 px-3 pb-4">
        
        <!-- Trending Top -->



        @foreach ($bencana as $kh)
        <div class="overflow-hidden flex cursor-pointer">
            <div class="relative md:flex flex w-4/12 p-1">
                <div class="rounded w-24 h-22 md:w-26 md:h-22 flex justify-center text-center overflow-hidden">
                    <img class="h-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110" src="{{ asset_cdn($kh->image,'thumbnail','berita') }}"
                    title="{{$kh->judul}}" alt="{{$kh->judul}}"
                    />
                </div>
            </div>
            <div class="w-8/12 px-1 py-1 font-inter text-gray-500 text-sm flex flex-col justify-center">
                <div class="w-full mb-0 break-words leading-tight">
                    <a href="{{ route('frontend.berita.show', [encode_id($kh->id), $kh->slug]) }}">
                        <h4 class="hover:text-red-500 text-base text-gray-800">{{ $kh->judul }}</h4>
                    </a>
                    
                </div>
                <div class="small -mt-1 font-normal">
                    {{ datepub($kh->published_at) }}
                </div>
                
            </div>
            
        </div>
        @endforeach
    </div>
</div>
@else

{{-- <div class="w-full p-2 d-none d-lg-block">
    <img class="h-full" src="{{ asset('img/banner/sidebar250.png') }}" alt="Banner Image">
</div> --}}
@endif