@extends('app')

@section('description'){{ mb_substr(strip_tags($news_data['news_desc']), 0, 150, 'UTF-8') }}@endsection
@section('title'){{ $news_data['news_title'] }}@endsection
@section('type'){{ 'article' }}@endsection
@section('img'){{ asset($news_data['news_img']) }}@endsection

@section('content')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ url()->current() }}"
  },
  "headline": "{{ $news_data['news_title'] }}",
  "image": [
    "{{ asset($news_data['news_img']) }}"
  ],
  "datePublished": "{{ date('Y-m-d\TH:i:s\Z', $news_data['news_time_add']) }}",
  "dateModified": "{{ date('Y-m-d\TH:i:s\Z', $news_data['news_time_add']) }}",
  "author": {
    "@type": "Person",
    "name": "{{ $news_data['news_write_by'] }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "بنك لايف - BankLive",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ asset('assets/logo2.png') }}"
    }
  },
  "description": "{{ mb_substr(strip_tags($news_data['news_desc']), 0, 150, 'UTF-8') }}",
  "articleBody": "{{ strip_tags($news_data['news_desc']) }}"
}
</script>

<article class="container my-5">
    <!-- Header Section -->
    <header class="mb-4 text-center">
        <h1 class="fw-bold display-5 mb-3">{{ $news_data['news_title'] }}</h1>
        <p class="text-muted mb-2">
            <i class="fa fa-clock me-1"></i> {{ date('d / m / Y H:i:s', $news_data['news_time_add']) }} 
            <span class="mx-2">|</span>
            <i class="fa fa-user me-1"></i> {{ $news_data['news_write_by'] }}
        </p>
    </header>

    <!-- Image Section -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-10 text-center">
            <img src="{{ asset($news_data['news_img']) }}" class="img-fluid rounded shadow" alt="{{ $news_data['news_img_title'] }}" style="max-height: 500px; width: 100%; object-fit: cover;">
            <figcaption class="text-muted mt-2">{{ $news_data['news_img_title'] }}</figcaption>
        </div>
    </div>

    <!-- Article Content Section -->
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="content_news" style="font-size: 1.1rem; line-height: 1.8;">
                {!! $news_data['news_desc'] !!}
            </div>
        </div>
    </div>

    <!-- Social Sharing Section -->
    <footer class="mt-5">
        <div class="d-flex justify-content-center gap-3">
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" class="btn btn-outline-primary">
                <i class="fab fa-facebook"></i> Facebook
            </a>
            <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}&text={{ $news_data['news_title'] }}" class="btn btn-outline-info">
                <i class="fab fa-twitter"></i> Twitter
            </a>
            <a href="https://wa.me/?text={{ url()->current() }}" class="btn btn-outline-success">
                <i class="fab fa-whatsapp"></i> WhatsApp
            </a>
            <a href="mailto:?subject={{ $news_data['news_title'] }}&body={{ url()->current() }}" class="btn btn-outline-danger">
                <i class="fas fa-envelope"></i> Email
            </a>
        </div>
    </footer>
</article>

<!-- Custom Styles -->
<style>
    .content_news p, .content_news h1, .content_news h2, .content_news h3, .content_news h4, .content_news h5, .content_news h6, .content_news span {
        line-height: 1.8;
    }

    @media (max-width: 768px) {
        .content_news {
            font-size: 1rem;
        }
    }
</style>
@endsection