@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 mb-5">
        <div class="col-md-8">
            <div class="mb-3">
                <h4 class="mt-2">{{ $news->title }}</h4>

                <small class="text-muted">
                    <i class="fa-regular fa-calendar"></i> &nbsp;{{ Common::dateFormat($news->created_at, 'dd mmmm yyyy | hh:ii WIB') }}
                </small>
            </div>

            <img src="{{ $news->image_url }}" class="img-fluid" alt="{{ $news->title . ' - ' . Config::get('app.name') }}" />

            <div class="mt-3">
                {!! $news->content !!}
            </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>

    <div class="news-section">
        <h4><span>Berita Terkait</span></h4>
    </div>

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

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