@extends('layouts.app')
@section('title', 'Berita & Acara – SD Negeri Swasta')

@section('content')

{{-- Page Hero --}}
<div
class="sd-page-hero"

style="
background:
linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.30),
rgba(0,0,0,.05)
),

url('{{ (isset($heroImages['berita-acara']) ? $heroImages['berita-acara']->url : asset('images/buatberita.jpeg')) }}');

background-size:cover;

background-position:center;
"

>

<div class="sd-page-hero-inner">

<p class="sd-page-breadcrumb">

<a href="{{ route('home') }}">
Beranda
</a>

&nbsp;/&nbsp;

<a href="#">
Informasi
</a>

&nbsp;/&nbsp;

<span>
Berita & Acara
</span>

</p>

<h1 class="sd-page-title">
Berita & Acara
</h1>

<p class="sd-page-subtitle">
Informasi terbaru, kegiatan sekolah, dan berbagai pembaruan
</p>

<div class="sd-page-accent"></div>

</div>

</div>

{{-- Content --}}
<div class="sd-page-body">

    {{-- FILTER + SEARCH --}}
<div class="sd-ba-toolbar sd-reveal">

<div class="sd-ba-filter">

<button class="sd-ba-filter-btn active"
onclick="filterBA(this,'semua')">

Semua

</button>

<button class="sd-ba-filter-btn"
onclick="filterBA(this,'berita')">

Berita

</button>

<button class="sd-ba-filter-btn"
onclick="filterBA(this,'acara')">

Acara

</button>

</div>


<div class="sd-ba-tools">

<div class="sd-ba-search">

<i class="bi bi-search"></i>

<input
type="text"
id="baSearch"
placeholder="Cari berita..."
onkeyup="searchBA()">

</div>


<input
type="date"
id="baDate"
class="sd-ba-date">

</div>

</div>

    {{-- Grid --}}
    {{-- Catatan: 'gambar' & 'video' bersifat opsional dan tidak terikat ke 'type'.
         Berita tidak wajib punya foto, acara pun tidak wajib punya video —
         kalau admin isi salah satunya saja, halaman tetap tampil rapi (pakai placeholder). --}}

    <div class="sd-ba-grid sd-reveal" id="baGrid">
        @forelse($posts as $post)
        <div class="sd-ba-card" data-type="{{ $post->type }}" onclick="window.location='{{ route('berita-acara.detail', $post->id) }}'">
            <div class="sd-ba-card-img-wrap">
                @if(!empty($post->gambar))
                <img src="{{ str_starts_with($post->gambar,'http') ? $post->gambar : asset($post->gambar) }}" alt="{{ $post->judul }}" class="sd-ba-card-img">
                @else
                <div class="sd-ba-card-img-fallback {{ $post->type }}">
                    <i class="bi {{ $post->type === 'acara' ? 'bi-calendar-event' : 'bi-newspaper' }}"></i>
                </div>
                @endif
                <span class="sd-ba-card-type {{ $post->type }}">{{ ucfirst($post->type) }}</span>
                @if(!empty($post->video))
                <span class="sd-ba-card-video-icon"><i class="bi bi-camera-video-fill"></i></span>
                @endif
            </div>
            <div class="sd-ba-card-body">
                <p class="sd-ba-card-date">{{ $post->tanggal->translatedFormat('d F Y') }}</p>
                <h4 class="sd-ba-card-title">{{ $post->judul }}</h4>
                <p class="sd-ba-card-desc">{{ $post->deskripsi }}</p>
                <div class="sd-ba-card-sep"></div>
                <a href="{{ route('berita-acara.detail', $post->id) }}" class="sd-ba-card-link">Selengkapnya</a>
            </div>
        </div>
        @empty
        <p style="color:var(--teks-abu)">Belum ada berita atau acara.</p>
        @endforelse
    </div>

</div>

@push('scripts')
<script>

let currentType='semua';


function applyFilter(){

const keyword=
document
.getElementById('baSearch')
.value
.toLowerCase();

const date=
document
.getElementById('baDate')
.value;


document
.querySelectorAll('#baGrid .sd-ba-card')
.forEach(function(card){

const type=
card.dataset.type;

const title=
card
.querySelector('.sd-ba-card-title')
.innerText
.toLowerCase();

const desc=
card
.querySelector('.sd-ba-card-desc')
.innerText
.toLowerCase();

const cardDate=
card
.querySelector('.sd-ba-card-date')
.innerText;


const matchType=
currentType==='semua'
||
type===currentType;


const matchSearch=
title.includes(keyword)
||
desc.includes(keyword);


const matchDate=
!date
||
cardDate.includes(
new Date(date)
.toLocaleDateString(
'id-ID',
{
day:'2-digit',
month:'long',
year:'numeric'
}
)
);


card.style.display=

(
matchType
&&
matchSearch
&&
matchDate

)

?

''

:

'none';

});

}


/* tombol */

function filterBA(btn,type){

currentType=type;

document
.querySelectorAll('.sd-ba-filter-btn')
.forEach(
b=>b.classList.remove('active')
);

btn.classList.add('active');

applyFilter();

}


/* search */

function searchBA(){

applyFilter();

}


/* tanggal */

document
.getElementById('baDate')
.addEventListener(
'change',
applyFilter
);

</script>
@endpush

@endsection