@extends('layouts.public')

@section('title', $article->title . ' - asrit.ir')

@section('content')
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card shadow-sm">
                    <div class="card-body p-5">
                        <h1 class="card-title mb-3">{{ $article->title }}</h1>
                        <p class="card-text text-muted mb-4">
                            تاریخ انتشار:  {{ to_persian_nums(jdate($article->published_at)->format('d F Y')) }}
                        </p>

                        {{-- ================= Start of Lead/Image Section ================= --}}

                        @if($article->summary)
                            <div class="card my-4 shadow-sm">
                                @if($article->image_path)
                                    {{-- Layout when BOTH summary and image exist --}}
                                    <div class="row g-0">
                                        <div class="col-md-7 d-flex align-items-center">
                                            <div class="card-body p-4">
                                                <p class="card-text fs-5" style="line-height: 1.8;">
                                                    {{ $article->summary }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <img src="{{ Storage::url($article->image_path) }}" class="img-fluid w-100 h-100" style="object-fit: cover; min-height: 250px;" alt="{{ $article->title }}">
                                        </div>
                                    </div>
                                @else
                                    {{-- Layout when ONLY summary exists (no image) --}}
                                    <div class="card-body bg-secondary text-white">
                                        <p class="card-text fs-5" style="line-height: 1.8;">
                                            {{ $article->summary }}
                                        </p>
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- ================= End of Lead/Image Section ================= --}}

                        <div class="article-body" style="line-height: 2;">
                            {!! $article->body !!}
                        </div>

                        {{-- This block displays the tags --}}
                        @if($article->tags->isNotEmpty())
                            <div class="mt-5">
                                <strong><i class="fas fa-tags"></i> برچسب‌ها:</strong>
                                @foreach($article->tags as $tag)
                                    <a href="#" class="badge bg-secondary text-decoration-none">{{ $tag->name }}</a>
                                @endforeach
                            </div>
                        @endif



                        <hr class="my-5">
                        <a href="{{ route('articles.index') }}" class="btn btn-outline-primary">&larr; بازگشت به لیست مقالات</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection