@extends('layouts.app')

@section('title', $articleData['title'] ?? 'Sports Article - Sports Portal')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            @if(isset($articleData) && !empty($articleData))
                <article class="sports-article">
                    <header class="mb-4">
                        <h1 class="display-5">{{ $articleData['title'] ?? 'Sports Article' }}</h1>
                        <div class="text-muted mb-3">
                            <small>
                                <i class="fas fa-calendar"></i> {{ $articleData['date'] ?? date('Y-m-d H:i:s') }}
                                @if($sport)
                                | <i class="fas fa-tag"></i> {{ ucfirst($sport) }}
                                @endif
                                @if($type)
                                | <i class="fas fa-folder"></i> {{ ucfirst($type) }}
                                @endif
                            </small>
                        </div>
                        @if(!empty($articleData['images']))
                        <div class="article-image mb-3">
                            <img src="{{ $articleData['images'] }}" class="img-fluid rounded" alt="{{ $articleData['title'] ?? 'Sports Image' }}">
                        </div>
                        @endif
                    </header>
                    
                    <div class="article-content">
                       @php
                       @endphp
                        @if(is_array($articleData['article'] ?? null))
                            @foreach($articleData['article'] as $content)
                                @if(is_array($content))
                                    {{-- Live blog entry --}}
                                    <div class="live-blog-entry mb-4 p-3 border rounded">
                                        @if(!empty($content['title']))
                                        <h4>{{ $content['title'] }}</h4>
                                        @endif
                                        @if(!empty($content['icon']))
                                        <img src="{{ $content['icon'] }}" class="me-2" style="width: 24px; height: 24px;">
                                        @endif
                                        @if(!empty($content['content']))
                                        <div>{!! $content['content'] !!}</div>
                                        @endif
                                    </div>
                                @else
                                    {{-- Regular paragraph --}}
                                    <div>{!! $content !!}</div>
                                @endif
                            @endforeach
                        @else
                            <p>Content not available.</p>
                        @endif
                    </div>
                </article>
            @else
                <div class="alert alert-info">
                    <h4>Article Not Available</h4>
                    <p>Unable to fetch the sports article at the moment. Please try again later.</p>
                </div>
            @endif
        </div>
        
        <!-- Sidebar -->
        <div class="col-md-4">
            @include('partials.sidebar')
        </div>
    </div>
</div>
@endsection