@extends('layouts.parting')
@section('content')
    <section id="hero" class="heading-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="ratio ratio-21x9">
                        <img class="img-fluid rounded-4 object-fit-cover"
                            src="https://apindo.or.id/storage/images/banners/5UlrUxlGjxWUrsI3k61514NQWDOLrfO8fkeFQy2u.png"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="berita" class="auto-section">
        <div class="container-lg berita">
            <form class="row align-items-center gap-3 mb-4" method="POST" action="{{ route('client.berita.search') }}">
                @csrf
                <div class="col-lg-4">
                    <div class="input-group flex-nowrap">
                        <input type="text" name="cari"
                            class="form-control border-primary border-width-2 text-primary py-2 px-4"
                            placeholder="Informasi yang anda inginkan" aria-describedby="addon-wrapping">
                        <button class="input-group-text btn-primary bg-primary border-0 btn-sm text-white"><i
                                class="bi bi-search"></i></button>
                    </div>
                </div>
            </form>
            <div class="row row-gap-4">
                @foreach ($berita as $item)
                    <div class="col-md-4">
                        <a href="{{ route('client.berita.read', ['slug' => $item->slug_berita]) }}" class="card">
                            <div class="ratio ratio-16x9 overflow-hidden rounded-4">
                                <img class="object-fit-cover rounded-4" src="{{ asset('storage/berita/' . $item->gambar) }}"
                                    alt="{{ $item->title }}">
                            </div>
                            <div class="card-body px-0">
                                <h4 class="fw-semibold">{{ $item->judul_berita }}</h4>
                                {!! Str::limit(html_entity_decode($item->isi_berita), 150, '...') !!}
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="row mt-4">
                <div class="col-12 d-flex justify-content-center">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link border-0" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item mx-2 active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item mx-2"><a class="page-link" href="#">2</a></li>
                            <li class="page-item mx-2"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link border-0" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </section>
@endsection