@php
use App\Models\ParameterDetail;
@endphp

@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Temukan berita terbaru tentang AturOrder, layanan order management terbaik di Indonesia. Dapatkan tips dan trik untuk mengelola bisnis Anda dengan lebih efektif')
@section('meta_keywords', 'Berita AturOrder, Order Management SaaS, Tips Bisnis, Trik Manajemen, Software Bisnis, Update, Informasi')

@section('content')
<x-section-page :label="$label" />

<section>
    <div class="row">
        <div class="col-md-8">
            <div class="news-section">
                <h4><span>Berita Terkini</span></h4>
            </div>

            <div class="row">
                @foreach ($news as $n)
                    <div class="col-sm-6 pb-5">
                        <a href="{{ $n->url }}">
                            <img src="{{ $n->image_url }}" class="img-fluid" alt="{{ $n->title . ' - ' . Config::get('app.name') }}" />
                            <h5 class="mt-2">{{ $n->title }}</h5>
                        </a>

                        <div class="mb-2">{{ substr(strip_tags($n->content), 0, 150) . '...' }}</div>
                        <small class="text-muted">
                            <i class="fa-regular fa-calendar"></i> &nbsp;{{ Common::dateFormat($n->created_at, 'dd mmmm yyyy | hh:ii WIB') }}
                        </small>
                    </div>
                @endforeach
            </div>

            <div class="mt-5 d-flex justify-content-center">
                <div>
                    {{ $news->links() }}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="news-section">
                <h4><span>Populer</span></h4>
            </div>

            @foreach ($popular as $p)
                <a href="{{ $p->url }}">
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <img src="{{ $p->image_url }}" alt="{{ $p->title . ' - ' . Config::get('app.name') }}" style="width: 150px;" />
                        </div>
                        <div class="me-auto">
                            <div class="mb-2">
                                {{ $p->title }}
                            </div>
                            <small class="text-muted">
                                <i class="fa-regular fa-calendar"></i> &nbsp;{{ Common::dateFormat($p->created_at, 'dd mmmm yyyy | hh:ii WIB') }}
                            </small>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .news-section {
        border-bottom: 1px solid #212529;
        margin-bottom: 20px;
    }
    .news-section h4 {
        margin-bottom: 0;
    }
    .news-section span {
        border-bottom: 4px solid #212529;
    }
</style>
@endpush