@extends('frontend.layouts.main')
@section('title') {{$$module_name_singular->judul}} @endsection
@section('content')
<!--================Blog Area =================-->
<section class="blog_area single-post-area mt-20 md:mt-40 mb-20">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 posts-list">
                <div class="single-post px-1 mt-10">
                    
<span class="md:ml-1 align-middle label-kategori{{$$module_name_singular->kategori_berita_id}} px-3 py-1 md:mt-3 text-sm mb-2 md:mb-1 font-semibold text-gray-100">{{$$module_name_singular->kategori->kategori_berita}}</span>
                    <h2 class="mb-2 md:my-4 text-2xl md:text-4xl leading-tight md:leading-tight">
                    {{$$module_name_singular->judul}}
                    </h2>
@if ($$module_name_singular->sub_judul)
<h3 class="mb-2 md:my-2 text-base md:text-lg text-red-600 leading-tight md:leading-tight">
                    {{$$module_name_singular->sub_judul}}
                    </h3>
@endif
<div class="md:flex md:justify-between mt-2 md:py-4 mt-6">
            <!-- Reporter -->
            <div class="flex items-center gap-2">

           

<a class="flex text-gray-700 hover:text-gray-500 gap-2 align-middle"
                                    href="{{ route('frontend.authors.show', [encode_id($$module_name_singular->user->id), $$module_name_singular->user->slug]) }}"
                                    >
                                    <img
                                    src="{{ asset(@$$module_name_singular->user->avatar) }}"
                                    class="transition-transform duration-300 ease-in-out transform hover:scale-110 ml-1 object-cover w-10 h-10 rounded-full shrink-0 md:w-10 md:h-10"
                                    loading="lazy"
                                    alt="{{ $$module_name_singular->user->name }}">
                                    <div class="flex">
                                     
                                    <div class="align-middle mt-1
                                    capitalize text-primary-600">
                                      <span class="font-normal text-sm mt-1.5">Oleh:</span> 
                                      <span class="md:text-base font-semibold"> 
                                        {{ $$module_name_singular->user->name }}
                                    </span>
                                     
                                        <div class="-mt-1 block md:hidden text-xs text-gray-500">
                                            <span class="align-middle">
                                                <i class="fa fa-calendar"></i>
                                            </span>
                                            {{ tanggal($$module_name_singular->published_at) }}
                                        </div>
                                    </div> 

                                     
                                    </div>
                                   

                                </a>

            </div>
            <!-- Tanggal & Views -->
            <div class="md:flex md:items-center gap-3">

                <div class="hidden md:block px-1 py-1 md:text-sm text-sm text-gray-700">
                 <span class="align-middle"><i class="fa fa-list"></i></span> 
                  {{ $$module_name_singular->kategori->kategori_berita }}
                </div>
                <div class="hidden md:block text-gray-400">|</div>
                <div class="hidden md:block px-1 py-1 md:text-sm text-xs text-gray-700">
                    <span class="align-middle">
                    <i class="fa fa-calendar"></i>
                   </span>
                     {{ tanggal($$module_name_singular->published_at) }}
                </div> 
                  <div class="hidden md:block text-gray-400">|</div>
                 <div class="hidden px-1 py-1 text-sm md:text-sm text-gray-700 md:block">
                   <span class="align-middle"><i class="fa fa-eye"></i></span>
                   {{ $$module_name_singular->read }}
                </div>

                
            </div>
        </div>

                    @if ($$module_name_singular->image)
                    <div class="h-48 md:h-auto mt-2 flex justify-center rounded-sm overflow-hidden shadow-sm">
                        <img class="h-full w-full object-cover" src="{{ asset_cdn($$module_name_singular->image,'original' ,'berita') }}"
                        alt="{{$$module_name_singular->judul}}"
                        title="{{$$module_name_singular->judul}}"
                         >
                    </div>
                    @if ($$module_name_singular->info_foto)
<div class="w-full mb-2 md:my-2 text-sm md:text-sm text-gray-500 leading-tight md:leading-tight">
                  
    <div class="text-right justify-end px-2">{{$$module_name_singular->info_foto}}</div>
                    </div>
@endif
                    @endif


<div class="py-2 md:py-3 flex align-items-center md:justify-between">
  <div class="hidden md:block px-1 mb-1 md:mb-0">
       <x-font-size target=".detail_berita .content" class="py-0" />
  </div>
  <div class="share-items">
        <x-library.share />
  </div>
</div>                   
  
  @if(isset($ads['below_content_image']) && $ads['below_content_image'])

        <div class="my-2 relative overflow-hidden h-auto">
            <a class="h-full" href="{{ $ads['below_content_image']->url }}" target="_blank" onclick="trackAdClick({{ $ads['below_content_image']->id }})">
                <img src="{{ asset_cdn($ads['below_content_image']->image, '', 'advertisement') }}" alt="{{ $ads['below_content_image']->title }}">
            </a>
        </div>
        @endif

                    
<div class="detail_berita w-full mt-1">
   


   <x-detail-berita :content="$$module_name_singular->description" :related="$relatedNews" :relatedmore="$relatedNewsMore" />





                    </div>
                </div>
                
                <div class="navigation-top py-4 mb-2">
                    <div class="text-center md:flex md:flex-row md:justify-between gap-2">
                       
                        <div class="gap-2 md:card-text">
                             <span class="like-info">
                            <span class="align-middle"><i class="fa fa-tags"></i></span>
                            Tags :
                        </span>
                            @foreach ($$module_name_singular->tags as $tag)
                            <a href="{{route('frontend.tags.show', [encode_id($tag->id), $tag->slug])}}" class="badge badge-warning">{{$tag->name}}</a>
                            @endforeach
                        </div>


                        <div class="flex justify-between text-center px-2 my-2 my-sm-0">
                         
                        </div>
                    

                    </div>
                </div>


            @if ($$module_name_singular->link_video)
               <div class="row">
             <div class="px-3 w-full mx-auto pb-8">
             <div class="relative pb-9/16">
                 <iframe class="absolute top-0 left-0 w-full h-full" 
                 src="{{youtube_to_embed($$module_name_singular->link_video)}}" 
                 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>  
                    </div>
            </div>
            </div>

            @endif
           
           <div class="row">
             <div class="hidden md:block px-0 w-full h-auto mx-auto pb-8">
           


<div class="commentbox" id="{{ route('frontend.berita.show', [encode_id($$module_name_singular->id), $$module_name_singular->slug]) }}"></div>
 <x-library.comment />


            </div>
            </div>


      @if(isset($ads['latest_news_row']) && $ads['latest_news_row'])

        <div class="my-2 relative overflow-hidden h-auto">
            <a class="h-full" href="{{ $ads['latest_news_row']->url }}" target="_blank" onclick="trackAdClick({{ $ads['latest_news_row']->id }})">
                <img src="{{ asset_cdn($ads['latest_news_row']->image, '', 'advertisement') }}" alt="{{ $ads['latest_news_row']->title }}">
            </a>
        </div>
        @endif

  

                @if(!$beritaTerkait->isEmpty())
                    <div class="row">
                     <div class="px-3 w-full">
                            <h4 class="border_section w-full"><a href="#" title="">Berita Terkait</a></h4>
                        </div>
                    <div class="mx-auto px-1">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                            @foreach ($beritaTerkait as $terkait)
                            <div class="bg-white px-2 md:px-1 mb-2">
                                <div class="kategori-img rounded-lg h-52 md:h-40 overflow-hidden">
                                    <img class="w-full h-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110" src="{{ asset_cdn($terkait->image, 'thumbnail','berita') }}" 
                                    alt="{{ $terkait->judul }}"
                                    judul="{{ $terkait->judul }}"
                                     >
                                </div>
                                <div class="w-full px-1">
                                    <h6 class="leading-tight mt-2">
                                    <a href="{{ route('frontend.berita.show', [encode_id($terkait->id), $terkait->slug]) }}"
                                        class="text-base font-bold text-gray-900 hover:text-red-600">
                                        {{ $terkait->judul }}
                                    </a>
                                    </h6>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
            
                
                
                
            </div>
           <div class="col-lg-4 md:border-l md:border-gray-300">
               @include('berita::frontend.berita.sidebar')
            </div>
        </div>
    </div>
</section>
<!--================ Blog Area end =================-->
@endsection

@push('page_css')

<style>
        /* Aspect Ratio Utility */
        .pb-9\/16 {
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        }
        .pb-9\/16 iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .related-news::before {
        content: "";
        height: 100%;
        border: 3px solid;
        border-style: solid;
        border-color: #d12b25;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
    }



    </style>
@endpush