@php
$setting = \Modules\Berita\Models\KategoriBerita::with('setting')->find(15);
$kopihideung = \Modules\Berita\Models\Berita::IdKategori(15)->take(2)->get();
@endphp
@push ('page_css')
<style type="text/css">

.container-widget-kopihideung {
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: 12px;
}

.container-widget-kopihideung .caption{
color: {{ $setting->setting->card_text_color ?? 'text-gray-900' }};
line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.container-widget-kopihideung .link{
font-size: 1rem;
}  
.container-widget-kopihideung .publish{
font-size: 0.7rem;
}  

}

.logo-widget-kopihideung {
background-image: url({{ storage($setting->setting->icon_card,'card')}});
background-size: cover;
background-repeat: no-repeat;
width: 290px;
height: 130px;
display: inline-block;

}
</style>
@endpush
@if ($kopihideung->count() > 0)
<div class="container-widget-kopihideung mb-3">
    @if ($setting->setting->icon_card)
    <div class="px-2 pt-4 pb-2 h-32">
    <i class="logo-widget-kopihideung"></i>
    </div>
    @else
    <div class="px-3 pt-4">
      Inspiring Kopi Hideung</h4>
    </div>
    @endif
    
    <div class="mt-4 py-4 px-2">
        
        <!-- Trending Top -->
        @foreach (\Modules\Berita\Models\Berita::IdKategori(15)->take(2)->get() as $kh)
<div class="px-3 md:px-5 flex items-center overflow-hidden">
    <div class="w-24 h-32 flex-shrink-0  shadow-inner  overflow-hidden rounded-md">
        <img src="{{ asset_cdn(@$kh->image,'thumbnail','berita') }}" alt="Avatar" class="w-full h-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110">
    </div>
    <div class="ml-2 my-0"> 
        <div class="publish text-gray-500 text-sm -mt-1 lg:text-sm xl:tex-sm font-semibold text-gray-600">
                  Oleh : {{ $kh->user->name }} 
                </div>
       <a href="{{ route('frontend.berita.show', [encode_id($kh->id), $kh->slug]) }}">
                        <h4 class="text-left break-words hover:text-red-500 font-sofia text-base md:text-2xl text-gray-800">{{ $kh->judul }}
                        </h4>
            </a>
            <div class="text-sm -mt-1 font-inter text-gray-500 text-sm leading-tight">{{ isiberita($kh->description, 1, 80) }} </div>
         
    </div>
</div>


        @endforeach
        
    </div>
</div>
@else

@endif